系列文章：

承接上文，本文主要来学文本内容和其它未分类的基础元素，是该系列最简单的一篇文章。

文本内容元素

`<text>` 与`<tspan>`

<text>元素绘制由文本组成的图形元素 。可以像任何其他元素一样将渐变、图案、剪切路径、蒙版或滤镜应用于<text>。

注意：如果文本包含在SVG中而不是包含在<text>元素内，则不会呈现该文本。

<tspan>元素用于在<text>元素或另一个<tspan>元素中定义子文本。通常定义这些子文本的原因是为了方便调整文本中的某个文本区域的样式。

属性

属性名	值	简介
`x`	长度/百分比	文本基线起点的x坐标。
`y`	长度/百分比	文本基线起点的y坐标。
`dx`	长度/百分比	从上一个文本元素水平移动文本的位置。
`dy`	长度/百分比	从上一个文本元素水平移动文本的位置。
`rotate`	数字列表	旋转每个字形的方向。可以单独旋转字形。
`textLength`	长度/百分比	文本应缩放以适合的宽度。
`lengthAdjust`	`spacing`（默认值）/`spacingAndGlyphs`	如何拉伸或压缩文本以适合 `textLength`属性定义的宽度。

<text> 与<tspan>所具同样的属性相同。

🌰：

html 复制代码

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <style>
    tspan {
      fill: blue;
    }
  </style>
  
  <text y='50'>
     大海是<tspan>蓝色</tspan>的
  </text>
</svg>

`<textPath>`

<textPath>用于将文本沿着指定的路径进行排列。可以实现在图形中创建更加有趣和创意的文本效果。

属性

属性名	值	简介
`href`	url	要在其上呈现文本的路径或基本形状的URL。`path`属性会覆盖该属性。
`lengthAdjust`	`spacing`（间距）/`spacingAndGlyphs`（间距和字形）	文本应该在哪里进行长度调整。
`method`	`align`/`stretch`	指定沿路径呈现单个字形的方法。
`path`	`<path>`数据，通常是`id`	应在其上呈现文本的路径。
`side`	`left`/`right`	应呈现文本的路径的哪一侧。
`spacing`	`auto`/`exact`	指定如何处理字形之间的间距
`startOffset`	长度/百分比/number	指定文本开头应与路径开头偏移的距离。
`textLength`	长度/百分比/number	文本将呈现到的空间的宽度。

🌰：

html 复制代码

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <path id="path" d="M50,100 C100,50 200,50 250,100 S400,150 450,100" fill="none" stroke="black" />
  <text>
    <textPath href="#path" startOffset="10%">
      Hello, World!
    </textPath>
  </text>
</svg>

文本相关属性

在SVG中包含很多字体和文本属性，在这些属性当中，绝大部分大家是很熟悉，因为它们其实也是CSS属性：

其中，alignment-baseline和dominant-baseline这两个个属性可能比较少见或者就没见过，接下来我们来学习一下它们，其余的属性可以参考我之前写的两篇文章CSS字体相关属性和CSS文本相关属性。

注意：baseline-shift属性即将被弃用，请使用vertical-align代替，不过多说明。

`alignment-baseline`

alignment-baseline属性指定元素（通常是文本内容元素）的哪个基线要与父元素的相应基线对齐。

注意：该属性与CSS vertical-align属性都是用于控制元素在垂直方向上的对齐方式，但是使用了其中某一个属性，就不能使用另外一个属性。

取值

关键字/值类型	简介
`baseline`	使用父项的主要基线选择。将框的相应基线与其父项的基线匹配。
`text-bottom`	将框的底部与父内容区域的顶部匹配。
`text-top`	将框的顶部与父内容区域的顶部匹配。
`text-before-edge`	要对齐的对象的对齐点与父文本内容元素的"边缘前文本"基线（文本顶部边缘）对齐。
`text-after-edge`	要对齐的对象的对齐点与父文本内容元素的"边缘后文本"基线（文本底部边缘）对齐。
`middle`	将框的垂直中点与父框的基线加上父框x高度的一半对齐。
`central`	将框的中心基线与其父项的中心基线匹配。
`ideographic`	将框的表意字符面底基线与其父项的表意字符面基线匹配。表意字符面基线描述汉字的书写规范。它指的是汉字书写时，字符下方的基线。
`alphabetic`	将框的字母基线与其父项的基线匹配。
`hanging`	要对齐的对象的对齐点与父文本内容元素的"hanging"基线对齐。"hanging"基线描述拉丁字母的书写规范。它指的是拉丁字母书写时，字符下方的基线。
`mathematical`	将框的数学基线与其父项的数学基线匹配。
`top`	将要对齐的子树的顶部与行框的顶部对齐。
`center`	将要对齐的子树的中心与线条框的中心对齐。
`bottom`	将要对齐的子树的底部与行框的底部对齐。

🌰：

html 复制代码

<svg 
  width="2000" 
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  >
  <style>
    text {
      text-decoration: line-through;
    }
  </style>

  <text alignment-baseline="baseline" y="50">baseline</text>
  
  <text alignment-baseline="text-top" x="105" y="50">text-top</text>

  <text alignment-baseline="text-bottom" x="210" y="50">text-bottom</text>

  <text alignment-baseline="text-before-edge" x="350"  y="50">text-before-edge</text>

  <text alignment-baseline="text-after-edge" x="550"  y="50">text-after-edge</text>

  <text alignment-baseline="middle" x="740"  y="50">middle</text>

  <text alignment-baseline="central" x="820"  y="50">central</text>

  <text alignment-baseline="ideographic" x="910"  y="50">ideographic</text>

  <text alignment-baseline="alphabetic" x="1050"  y="50">alphabetic</text>

  <text alignment-baseline="hanging" x="1180"  y="50">hanging</text>

  <text alignment-baseline="mathematical" x="1275"  y="50">mathematical</text>

  <text alignment-baseline="top" x="1430"  y="50">top</text>

  <text alignment-baseline="center" x="1480" y="50">center</text>

  <text alignment-baseline="bottom" x="1560" y="50">bottom</text>
</svg>

`dominant-baseline`

dominant-baseline属性指定主导基线，用于对齐框的文本和内联级别内容的基线，和确定或重新确定缩放基线表。还指示在框的对齐上下文中参与基线对齐的任何框的默认对齐基线。

取值

关键字/值类型	简介
`auto`
`ideographic`	主导基线的基线标识符设置为`ideographic`，派生基线表使用字体中的`ideographic`基线表构造。
`alphabetic`	主导基线的基线标识符设置为`alphabetic`，派生基线表使用字体中的`alphabetic`基线表构造。
`hanging`	主导基线的基线标识符设置为`hanging`，派生基线表使用字体中的`hanging`基线表构造。
`mathematical`	主要基线的基线标识符设置为`mathematical`，派生基线表使用字体中的`mathematical`基线表构造。
`central`	主导基线的基线标识符设置为`central`。派生的基线表是根据字体中的基线表中定义的基线构造的。该字体基线表使用以下基线表名称的优先级顺序进行选择：`ideographic`、`alphabetic`、`hanging`、`mathematical`。
`middle`	主导基线的基线标识符设置为`middle`。派生的基线表是根据字体中的基线表中定义的基线构造的。该字体基线表使用以下基线表名称的优先级顺序进行选择：`ideographic`、`alphabetic`、`hanging`、`mathematical`。
`text-after-edge`	主要基线的基线标识符设置为`text-after-edge`。派生的基线表是根据字体中的基线表中定义的基线构造的。从字体的基线表中选择使用哪种字体基线表取决于浏览器。
`text-before-edge`	主要基线的基线标识符设置为`text-before-edge`。派生的基线表是根据字体中的基线表中定义的基线构造的。从字体的基线表中选择使用哪种字体基线表取决于浏览器。
`text-top`	使用EM框的顶部作为基线。

🌰：

html 复制代码

<svg 
  width="1400" 
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  >
  <style>
    text {
      text-decoration: line-through;
      font-size: 20px;
    }
  </style>

  <text alignment-baseline="auto" y="50">baseline</text>
  
  <text alignment-baseline="ideographic" x="105" y="50">ideographic</text>

  <text alignment-baseline="hanging" x="250" y="50">hanging</text>

  <text alignment-baseline="mathematical" x="350"  y="50">mathematical</text>

  <text alignment-baseline="central" x="510"  y="50">central</text>

  <text alignment-baseline="middle" x="610"  y="50">middle</text>

  <text alignment-baseline="text-after-edge" x="690"  y="50">text-after-edge</text>

  <text alignment-baseline="text-before-edge" x="880"  y="50">text-before-edge</text>

  <text alignment-baseline="text-top" x="1080"  y="50">text-top</text>
</svg>

未分类元素

`<style>`和`<script>`

<style>和<script>元素分别用于为SVG图形添加样式和在SVG图形中嵌入脚本，添加交互效果。

在HTML环境下使用SVG时，它们与HTML中的<style>和<script>几乎没什么不同。尤其是<script>，依然可以用平常使用的方式访问SVG元素，比如document.querySelector('rect')是有效的，这是因为DOM中每个SVG元素都有SVGxxxElement接口。但脱离了HTML环境就不清楚了。

属性

属性名	值	简介
`type`	见媒体查询和type attribute	定义元素内容的类型。
`media`（`<style>`）	见media-query-list	指定必须匹配的媒体查询才能应用样式表。
`href`（`<script>`）	string	外部脚本的链接。

`<![CDATA[]]>`

在网上下载一个动态的SVG时，通常会看到其中的<style>和<script>标签中的内容会使用<![CDATA[]]>进行包裹：

html 复制代码

<style>
  /* <![CDATA[ */
  ...
  /* ]]> */
</style>

<script>
  // <![CDATA[
  ...
  // ]]>
</script>

这是为了避免解析器将其中的内容误认为是XML标记。这样可以确保其中的样式和脚本能够正确地被解析和执行。

自己写的时候，在HTML、CSS和JS文件中会报错，但是不影响使用，可以将它们分别注释起来，但是在最后的文件当中需要解注。

`<foreignObject>`

<foreignObject>元素用于在SVG图像中嵌入如HTML元素或其他XML命名空间等非SVG内容。可以实现更复杂的布局和交互效果。例如可以在SVG图像中嵌入一个HTML表单元素等。

属性

属性名	值	简介
`width`	长度/百分比	元素宽度。
`height`	长度/百分比	元素高度。
`x`	长度/百分比	元素的X坐标。
`y`	长度/百分比	元素的Y坐标。

🌰：

html 复制代码

<svg  
  width="300"
  height="300"
  xmlns="http://www.w3.org/2000/svg"
  >
  <rect width="250" height="250" fill="#333" />
  <foreignObject x="115" y="153" width="200" height="200">
    <table id="mytable" xmlns="http://www.w3.org/1999/xhtml" style="background-color: #fff;">
      <thead>
        <tr>
          <th>性名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <td>张三</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>20</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </foreignObject>
</svg>

改动一下上面的🌰，如果不用<foreignObject>包裹非SVG内容则会像下面这样：

`<view>`

<view>元素用于创建一个视图框，它定义了一个矩形区域，用于显示SVG图形的一部分。可以实现对SVG图形的裁剪和缩放效果。

属性

属性名	值	简介
`viewBox`	`min-x min-y width height`	定义视图框的位置和大小。
`preserveAspectRatio`	(`none`、`xMinYMinxMidYMin`、`xMaxYMin`、`xMinYMid`、`xMidYMid`、`xMaxYMid`、`xMinYMax`、`xMidYMax`、`xMaxYMax`) [(`meet`、`slice`)]	定义视图框的缩放和对齐方式。

`<clipPath>`

<clipPath>元素用于定义一个剪切路径以剪切图形的元素。与CSS clip-path属性类似。通过<clipPath>元素内部使用各种SVG元素来创建自己想要的剪切形状。然后将<clipPath>元素应用于其他图形元素，通过设置其clip-path属性来限制它们的可见区域。

属性

属性名	值	简介
`clipPathUnits`	`userSpaceOnUse`/`objectBoundingBox`	定义`<clipPath>` 元素内容的坐标系。

MDN🌰：

html 复制代码

<svg viewBox="0 0 100 100">
  <style>
    @keyframes openYourHeart {
      from {
        r: 0;
      }
      to {
        r: 60px;
      }
    }

    #myClip circle {
      animation: openYourHeart 15s infinite;
    }
  </style>

  <clipPath id="myClip">
    <circle cx="40" cy="35" r="35" />
  </clipPath>


  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

裁剪相关属性

`clip-path`属性

clip-path属性为元素定义或关联一条剪切路径。通常与<clipPath>一起出现，也可以用于其他元素身上。

取值

值类型	简介
`url()`	接受一个外部路径链接，通常是`<clipPath>`的`id`。
`<basic-shape>`	即各种形状函数，跟在CSS `clip-path`属性中使用现状函数一样，如：`circle(6 at 12 8)`，详细请参考basic-shape
`<geometry-box>`	应用`<basic-shape>`的额外信息，用于区分CSS基本形状如何应用于元素上：`fill-box`表示将对象的包围框作为参照框；`stroke-box`表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的SVG视窗作为参照框。
`none`	不指定剪切路径。

`clip-rule`

clip-rule属性指定剪切路径的填充规则。它与之前文章中介绍过的fill-rule一样，但是clip-rule属性只适用于<clipPath>元素中的图形元素。详细请查阅SVG元素详解 -- 图形元素、容器元素、描述性元素及属性详解。

参考资料

SVG 元素参考

SVG元素详解（2） -- 文本内容元素和其他未分类元素

文本内容元素

<text> 与<tspan>

属性

<textPath>

属性

文本相关属性

alignment-baseline

取值

dominant-baseline

取值

未分类元素

<style>和<script>

属性

<![CDATA[]]>

<foreignObject>

属性

<view>

属性

<clipPath>

属性

裁剪相关属性

clip-path属性

取值

clip-rule

参考资料

`<text>` 与`<tspan>`

`<textPath>`

`alignment-baseline`

`dominant-baseline`

`<style>`和`<script>`

`<![CDATA[]]>`

`<foreignObject>`

`<view>`

`<clipPath>`

`clip-path`属性

`clip-rule`