SVG元素详解系列（1） -- 图形元素、容器元素和描述性元素

---

承接上文，本文来介绍一下相对基本的元素。图形元素 是SVG文档中用来创建实际图形的元素。它们用于绘制线条、形状和文本等可视化内容；容器元素 用于组织和分组图形元素，以便更好地控制它们的位置、旋转和缩放等属性；描述性元素用于提供关于SVG文档和其中的元素的描述信息。

图形元素

<line>

<line>元素定义了从一点开始到另一点结束的线段。

属性

属性名	值	简介
x1	长度/百分比/number	定义直线起点的x轴坐标。
y1	长度/百分比/number	定义直线起点的y轴坐标。
x2	长度/百分比/number	定义直线终点的x轴坐标。
y2	长度/百分比/number	定义直线终点的y轴坐标。
pathLength	number	以用户单位定义总路径长度。

这里说明一下pathLength属性，具体来说，它用于校准浏览器的距离计算与作者的距离计算，方法是使用比率 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a t h L e n g t h / 路径长度的计算值 pathLength / 路径长度的计算值 </math>pathLength/路径长度的计算值缩放所有距离计算。可以将该属性理解为将总路径长度设置为原路径长度的百分之几。

例如下面这个🌰，这条线的长度是100，在加上pathLength="50"的时候，结果如下：

相比原来的10段线（包括间隔），这里只有5段线，是原来的一半，套用公式就是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 50 / 100 = 1 / 2 50 / 100 = 1 / 2 </math>50/100=1/2。

注意：该属性需要在有分段的情况下才看得到效果（比如设置stroke-dasharray）。同时该属性还会用在下文的若干个属性当中，效果同理。

🌰：

<!-- 定义一条从(0, 10)到(100, 10)的黑色虚线。 -->
<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="10" x2="100" y2="10" stroke="black" stroke-width="2" stroke-dasharray="10" />
</svg>

注意：因为<line>元素是单线，在几何上是一维的，它们没有内部，因此<line>元素永远不会被填充（即fill属性无效）。

<polyline>

<polyline>元素定义了一组连接的直线段 -- 折线 。默认情况下最后一个点会连接到第一个点，形成闭合（emmmmm...至少在chrome浏览器是这样），可以通过设置fill="none"来解决。

属性

属性名	值	简介
points	以空格分隔的坐标组	定义绘制折线所需的点列表
pathLength	number	指定路径的总长度（以用户单位为单位）。

• 如果points的坐标数量是奇数，则该元素错误，控制台将报错，其用户代理行为与不正确指定的<path>元素相同：用户代理会删除最后一个奇数坐标再呈现形状。

  初始值为none指示折线元素有效但不呈现。

🌰：

<svg 
  width="300" 
  height="500"
  xmlns="http://www.w3.org/2000/svg"
  >
  
  <polyline points="100,0 0,100 200,100" stroke="purple" fill="none" />

   <!-- 三角形 -->
  <polyline points="100,110 0,200 200,200" fill="purple" />
  
  <!-- 坐标数为奇数，控制台报错，并删除最后一个坐标再显示现状 -->
  <polyline points="100,210 0,300 300" stroke="purple" /> 
</svg>

<rect>

<rect>定义一个与当前用户坐标系统轴对齐的矩形。

属性

属性名	值	简介
x	长度/百分比	矩形的x坐标。
y	长度/百分比	矩形的y坐标。
width	auto/百分比/number	矩形的宽度。
height	auto/百分比/number	矩形的高度。
rx	auto/长度/百分比	矩形的水平圆角半径。
ry	auto/长度/百分比	矩形的垂直圆角半径。
pathLength	number	矩形周长的总长度（以用户单位为单位）。

• width和height、rx和ry任一属性的负值无效，直接忽略。width和height任一维度的计算值为零将禁用元素的呈现；rx和ry任一维度的计算值为零，或两个维度的计算值为auto，将生成一个没有圆角的矩形。

• 对于rx和ry属性，如果只指定了其中的一个属性（另一个属性未指定或为auto），则另一个属性的值等于已指定属性的值。例如：指定rx='20'，ry未指定或为auto，则ry的值等于rx等于20。

🌰：

<!-- 绘制一个浅蓝色矩形和一个浅蓝色圆角矩形 -->
<svg width="500" height="500"  xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="lightblue" />

  <!-- 圆角矩形 -->
  <rect x="150" y="0" width="100" height="100" rx="20" fill="lightblue" />
</svg>

<circle>

<circle>元素根据中心点和半径定义圆。

属性

属性名	值	简介
cx	长度/百分比	圆心的x轴坐标。
cy	长度/百分比	圆心的y轴坐标。
r	长度/百分比	圆的半径。
pathLength	number	圆周长的总长度（以用户单位为单位）。

注意：当r属性的值小于等于零时将禁用圆的呈现。

🌰：

<!-- 定义一个圆心在(50, 50)，半径为50浅蓝色的圆 -->
<svg width="500" height="500"  xmlns="http://www.w3.org/2000/svg">
  <circle cx='50' cy='50' r='50' fill='lightblue' />
</svg>

<ellipse>

<ellipse>元素用于基于中心坐标及其x和y半径创建椭圆。

属性

属性名	值	简介
cx	长度/百分比	椭圆中心的x位置。
cy	长度/百分比	椭圆中心的y位置。
rx	长度/百分比	椭圆在x轴上的半径。
ry	长度/百分比	椭圆在y轴上的半径。
pathLength	number	指定路径的总长度（以用户单位为单位）。

• rx和ry任一属性的负值无效，直接忽略。任一维度的计算值为零，或两个维度的计算值为auto，将禁用元素的呈现。

• 如果rx和ry只指定了其中的一个属性，另一个属性未指定或为auto，则效果与<circle>元素一致，显示为圆。

🌰：

<svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="150" cy="150" rx="120" ry="100" fill="none" stroke="lightblue" stroke-width="5" />
</svg>

<polygon>

<polygon>元素定义了一个由一组连接的直线段组成的闭合形状。

属性

属性名	值	简介
points	以空格分隔的坐标组	定义绘制面所需的点列表（x，y绝对坐标组）。
pathLength	number	指定路径的总长度（以用户单位为单位）。

• points属性与<polyline>元素的注意点一样。

🌰：

<svg 
  width="300" 
  height="500"
  xmlns="http://www.w3.org/2000/svg"
  >
  <!-- 类似闪电的图形 -->
  <polygon points="0,150 50,50 50,100 100,0" fill="purple" />

  <!-- 绘制一个类似闪电的图形，取消填充色，仅描边 -->
  <polygon points="100,150 150,50 150,100 200,0" fill="none" stroke="purple" />
</svg>

<image>

<image>元素指示将一个完整文件的内容呈现到当前用户坐标系统中的给定矩形中。可以引用栅格图像文件，如PNG或JPEG，也可以引用MIME类型为"image/svg+xml"的文件。符合标准的SVG阅读器需要至少支持PNG, JPEG和SVG格式文件。如果当前文档支持动画，则必须以安全动画模式处理SVG文件;如果当前文档是静态的，则必须以安全静态模式处理SVG文件。

使用说明

处理"图像"的结果总是一个四通道RGBA结果。当一个<image>元素引用一个只有三个通道(RGB)的图像(如许多PNG或JPEG文件)时，效果就好像对象被转换成一个Alpha通道统一设置为1的4通道RGBA图像。对于单通道(灰度)光栅图像，其效果就像将对象转换为4通道的RGBA图像，其中引用对象的单通道用于计算三个颜色通道，Alpha通道统一设置为1。

使用image>显示的SVG文件被视为图像：不会加载外部资源，不会应用:visited式，并且它们不能是交互式的。要包含动态SVG元素，可以在<use>元素身上引用外部URL。要想包含SVG文件并在其中运行脚本，可以在<foreignObject>中使用<object>。

属性

属性名	简介
href	指向图像的URL。
x	从原点水平定位图像。
y	从原点垂直定位图像。
width	渲染图像的宽度。
height	渲染图像的高度。
preserveAspectRatio	控制图像的缩放方式。
crossorigin	定义CORS请求的凭据标志的值。

🌰：

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <image href="xxx.png" height="200" width="200" />
</svg>

image-rendering属性

image-rendering属性指定浏览器在渲染SVG图像时使用的算法。向浏览器提供了有关如何在执行图像处理时进行速度与质量权衡的提示。

取值

关键字	简介
auto	指示用户代理应做出适当的权衡以平衡速度和质量，但质量应比速度更重要。
optimizeSpeed	强调渲染速度而不是质量。
optimizeQuality	强调质量而不是呈现速度。

<path>

<path>元素是定义形状的通用元素 。所有的基本形状都可以用路径元素创建（基本形状元素能做的<path>都能做）。<path>元素在SVG元素中的重要性是数一数二的，在图标网站上随便下一个SVG格式的图标，查看其源代码，<path>元素占了绝大部分，可以说绝大部分SVG文件是由它们的路径数据所主导的。

属性

属性名	值	简介
d	string	定义路径的形状。
pathLength	number	以用户单位指定路径的总长度。

掌握<path>的关键就是掌握d（路径数据）属性。其值使用前缀表示法（命令后接参数）指定，其中命令有二十个，压缩一下就是十个：

命令	参数	含义
M / m	(x y)	将"画笔"移动 到点(x, y)。
L / l	(x y)+	绘制一条从当前点到点(x, y)的直线。
H / h	x+	从当前点绘制一条水平线 到x。
V / v	y+	从当前点绘制一条垂直线 到y。
A / a	rx ry angle large-arc-flag sweep-flag x y)	绘制从当前点到(x, y)的椭圆弧。
Q / q	(x1 y1 x y)+	将(x1，y1)作为控制点绘制从当前点到(x2，y2)的二次贝塞尔曲线。
T / t	(x y)+	绘制一条从当前点到(x，y)的平滑二次贝塞尔曲线。
C / c	(x1 y1 x2 y2 x y)+	绘制一条将(x1,y1)作为曲线起点的控制点，(x2,y2)作为曲线终点的控制点，从当前点绘制到(x,y)的三次贝塞尔曲线。
S / s	(x2 y2 x y)+	绘制一条从当前点到(x，y)的平滑三次方贝塞尔曲线。
Z / z	无	从当前点到当前子路径的初始点绘制一条直线以闭合路径。

大写字母表示绝对坐标 ，每个命令中的参数都是参考SVG坐标系的原点坐标；小写字母表示相对坐标 ，相对的是当前点（如果是第一个命令则为(0, 0)）的坐标，比如当前点坐标是(50, 50)，然后使用l 100 100，那么在SVG坐标系中lineto的实际坐标是(150, 150)，在当前点的坐标基础上各加100。当命令结束后，(150, 150)成为新的当前点。

前缀表示法比较标准的写法像：d="M 0 50 L 100 100 ..."。不过命令与命令、参数与参数之间，可以用逗号分隔，也可以用空格分隔；命令和参数之间，空格可有可无。具体写法以个人习惯或者项目规范为主。部分命令详解和注意点如下：

• 如果m命令是路径的第一个命令，则会被其视为一对绝对坐标。

• L / l、H / h和V / v的区别：

  1. H / h = L / l将参数y坐标设置为0，即(x, 0)。
  2. V / v = L / l将参数x坐标设置为0，即(0, y)。

  需要注意的是，这三个命令分别可以接受多个坐标、x和y。L / l命令接受多个坐标表示折线；而H / h和V / v接收多个x和y通常是没意义的。

• 对于A / a命令，椭圆弧的大小和方向由两个半径(rx, ry)和angle（x轴旋转）定义。angle表示整个椭圆相对于当前坐标系x轴的旋转方式（以度为单位）。

  large-arc-flag和sweep-flag可选的值均为0和1，前者分别表示绘制小圆弧还是还圆弧 ；后者分别表示逆时针旋转弧度还是顺时针旋转弧度。

• 对于T / t与S / s命令，如果是路径的第一个命令，或者之前的命令不是C / C和S / S，则假定第一个控制点与当前点重合，(x2, y2)（曲线末端的控制点）为第二个控制点。

以上命令（除了Z / z）结束时，将以最后一个坐标点作为当前点 。如果Z / z命令紧跟在M / m命令之后，则M / m命令的参数为下一个子路径的起点。如果Z / z命令紧跟在任何其他命令之后，则下一个子路径必须从与当前子路径相同的初始点开始。

如果路径数据的值为none或为空，则表示<path>元素没有路径数据，不会呈现在页面上；如果路径数据的语法有误，则路径数据错误，控制台报错。

🌰：

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- 绝对 -->
  <!-- 画一条值线 -->
  <path d="M 50 50 L 100 100" stroke="lightblue" />
  <!-- 使用 H 命令， V 命令类似 -->
  <path d="M 50 50 H 100" stroke="lightblue" />

  <!-- 椭圆弧 A rx ry angle large-arc-flag sweep-flag x y -->
  <path d="M 150 100 A 30 30 0 1 1 200 100" fill="lightblue" />

  <!-- 二次贝塞尔曲线 Q x1 y1 x y -->
  <path d="M 50 200 Q 60 100 150 200" fill="lightblue" />

  <!-- 三次贝塞尔曲线 C x1 y1 x2 y2 x y -->
  <path d="M 200 200 C 210 100 180 100 150 200" fill="lightblue" />

  <!-- 闭合路径 -->
  <path d="M 50 250 L 100 300 L 0 300 Z" fill="lightblue" />

  <!-- 相对 -->
  <!-- 画一条值线 -->
  <path d="M 50 50 l 50 50" stroke="lightblue" />

  <!-- 使用 h 命令， v 命令类似 -->
  <path d="M 50 50 h 100" stroke="lightblue" />

  <!-- 椭圆弧 a rx ry angle large-arc-flag sweep-flag x y -->
  <path d="M150 100 a 30 30 0 1 1 150 0" fill="lightblue" />

  <!-- 二次贝塞尔曲线 q x1 y1 x y -->
  <path d="M 50 200 q 30 100 100 0" fill="lightblue" />

  <!-- 三次贝塞尔曲线 c x1 y1 x2 y2 x y -->
  <path d="M 200 200 c 210 100 180 100 150 0" fill="lightblue" />

  <!-- 闭合路径 -->
  <path d="M 50 250 l 50 50 l -100 0 Z" fill="lightblue" />
</svg>

形状渲染（shape-rendering属性）

shape-rendering属性用于在渲染路径、圆形或矩形等形状时要进行速度、边缘或精度权衡的提示。

取值

关键字	简介
auto	指示用户代理应做出适当的权衡，但精度比速度和边缘重要。
optimizeSpeed	强调渲染速度比另外两者重要。
crispEdges	强调渲染清晰的边缘比另外两者重要。为了实现清晰的边缘，用户代理可能会关闭所有直线和曲线的抗锯齿，或者可能只关闭接近垂直或水平的直线的抗锯齿。此外，用户代理可能会调整线位置和线宽，以将边缘与设备像素对齐。
geometricPrecision	强调渲染精度比另外两者重要。

填充与描边

填充

填充是指图形进行颜色填充，在SVG中使用fill属性指定，默认情况下，fill="black"。

注意：fill属性在不同的元素上含义不同，在图形元素中用于对整个图形进行颜色填充；对文本内容元素用于填充文本的颜色；对动画元素用于指定动画的最终状态。

fill属性进行的是单个颜色的填充，如果需要多个颜色（渐变）填充，需要使用渐变元素，这个我们后面再说。另外，如果要指定填充色的透明度，可以使用fill-opacity属性指定。

fill-rule

这个属性跟上面那两个属性不一样，他不是指定颜色等等，这里主要是考虑到大家查阅文档的时候，可能会跟上面那两个属性混淆，因此这里顺便说明一下该属性。

fill-rule定义用于确定形状内部的算法，它决定了如何填充图形的内部区域。

取值

关键字	简介
nonzero	通过描述从某点向任意方向绘制射线，并统计路径上每一条线段与射线相交的情况来确定该点是否属于形状的内部或外部。如果统计结果为0，则表示该点在形状的外部；如果结果不为0，则表示该点在形状的内部。
evenodd	从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

MDN🌰：

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!--
    nonzero 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>

  <!--
    这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
           
  <!-- -------------------------------------------------------- -->
  
   <!--
    evenodd 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>

  <!--
    这个例子与上面例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

描边

描边是指对图形边缘进行绘制的过程，用于定义图形的外形轮廓。在SVG中，描点使用stroke属性指定。stroke属性也接受一个颜色值，表示描边的颜色。

stroke与fill的区别如下：

注意：由于fill属性的默认值为黑色，除了<line>元素之外，如果只设置了strok属性，即使不指定fill属性也会有黑色填充。如果需要只显示描边，需要显式设置fill="none"。

在SVG中，描边要比填充复杂一点，因此会有更多更细节的属性：

• stroke-opacity：指定描边的透明度，值范围在0~1之间。

• stroke-linecap：用于指定路径的端点样式。MDN🌰：

• stroke-miterlimit：用于控制两条线段相交处的尖角长度。它定义了一个限制值，当两条路径的夹角超过这个限制值时，尖角将被截断成一个平角。计算公式如下：

  🌰：

  

  注意：该属性只影响stroke-linejoin="miter/miter-clip"的情况。

• stroke-linejoin：指定路径拐角处的连接方式。🌰：

  

  miter与miter-clip的区别在于，如果指定了miter-clip的元素超过了stroke-miterlimit，则斜切将被裁剪为等于stroke-miterlimit值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比miter更好的渲染效果。但是兼容性较差。

• stroke-dasharray：用于指定描边是否为虚线状，并且指定描边在每条边上"破折号"与间隔的长度。该属性接受一个每两项表示一对"破折号"与间隔长度的数字列表（以逗号分隔），如5,3表示"破折号"的长度为5，间隔长度的长度为3。

  注意：如果提供了奇数个值，则重复值列表以生成偶数个值。如5，3，2相当于5,3,2,5,3,2。

  MDN🌰：

• stroke-dashoffset：定义关联虚线数组呈现时的偏移量。该属性接受一个百分比或数字长度，其中正值向左偏移，负值向右偏移。🌰：

  

图形引用元素

<use>

<use>元素从SVG文档中获取节点，并在其他地方复制它们 。<use>元素引用了另一个元素，该元素的副本在文档中代替<use>。引用的元素可以是容器元素，在这种情况下，将使用以该元素为根的完整SVG文档子树的副本。

使用说明

克隆的内容会继承<use>元素的样式，并且可以作为用户事件的目标。但是，这些克隆的元素实例仍然链接到引用的源，并反映原始源中的DOM变化。此外，应用于引用元素作用域的所有样式规则也适用于克隆Shadow tree的作用域。

如果解析URL后引用的元素不是SVG元素，那么引用无效；如果引用的元素是<use>元素的祖先(包含shadow)，那么这是一个无效的循环引用（否则，用户代理必须生成重用图形的阴影树，以呈现为<use>元素的内容）。这都会使<use>元素错误。

克隆的节点不会公开，因此在使用CSS 设置<use>元素及其克隆的后代样式时必须小心。CSS属性不能保证被克隆的DOM继承，除非使用CSS继承显式请求它们。

出于安全原因，浏览器可能会对<use>元素应用同源策略，并可能拒绝在href属性中加载跨源URL。目前还没有定义为<use>元素设置跨起源策略的方法。

<use> Shadow tree

Scalable Vector Graphics (SVG) 2规范： 由<use>元素生成的重用图形是根据阴影树定义的。因此在交互性和样式继承方面，它们与SVG中其他类型的可重用图形(例如<pattern>和<marker>内容)有很大的不同。

Shadow tree中的元素被渲染成好像<use>元素是一个容器，它们是容器的子元素。但是SVG文档对象模型(DOM)只包含<use>元素及其属性。SVG DOM并没有将元素实例作为<use>元素的子元素。

当用户代理成功解析一个<use>元素以识别一个引用的元素时，用户代理必须创建一个<use>元素阴影树，其宿主是<use>元素本身。即使<use>元素没有被渲染，也必须创建影子树，因为它是未渲染元素的后代元素，因为条件处理，或者因为它的display属性被设置为none或因为它是一个祖先元素。

如果引用的元素在外部文件中，那么所有属性和样式属性中的URL引用都必须是绝对的，然后再把值复制到元素实例中。Shadow tree本身使用与包含它的文档相同的文档基URL。Shadow tree本身使用与包含它的文档相同的文档基础URL。

如果<use>元素或引用的元素被修改，导致<use>元素的URL引用无法解析，那么该<use>元素的整个Shadow tree将被丢弃。

当一个<use>元素引用另一个<use>元素，或者其内容包含一个<use>元素时，那么shadow DOM克隆方法是递归的。但是，直接或间接引用元素以创建循环依赖项的一组引用是无效的循环引用。<use>元素或元素实例(其Shadow tree将创建循环引用)错误，用户代理不能呈现。

属性

属性名	值	简介
href	string	需要复制的元素/片段的URL。
x	坐标	应用于<use>元素的最终偏移量变换的x坐标。
y	坐标	应用于<use>元素的最终偏移量变换的y坐标。
width	长度	<use>元素的宽度。
height	长度	<use>元素的高度。

• width和height对<use>元素没有影响，除非引用的元素具有viewBox - 即它们仅在<use>中引用<svg>或<symbol>元素时才起作用。
• 在<use>标签指定与被引用元素中相同的属性时不会生效，结果仍然是被引用元素中的属性为主，没有相同属性时才会以<use>标签指定的属性为主。

🌰：

<svg width="300" height="200"  xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="50" cy="50" r="50" stroke="blue" />
  <use href="#myCircle" x="100" fill="blue" />

  <!-- stroke无法覆盖被引用元素的stroke -->
  <use href="#myCircle" x="200" fill="none" stroke="purple" />
</svg>

容器元素

<a>

<a>元素创建指向其他网页、文件、同一页面中的位置、电子邮件地址或任何其他URL的超链接 。与HTML的<a>类似。

使用说明

<a>元素可以包含其父元素可能包含的任何元素，但不能包含另一个<a>元素；相同的元素用于图形和文本链接的内容。链接可能不是嵌套的；如果<a>元素是另一个超链接元素的后代（无论是在 SVG 命名空间中还是在另一个命名空间中），则用户代理必须忽略其href属性并将其视为非活动状态。无效的<a>元素仍然必须呈现为通用容器元素。

注意：无效嵌套链接的呈现存在风险，并且可能与关于未知元素呈现的任何决策同步。

属性

属性名	值	简介
href	string	超链接指向的URL或URL片段。
hreflang	string	超链接指向的URL或URL片段的人类语言。
rel	连接类型	目标对象与链接对象的关系。
download	boolean	指示浏览器下载 URL 而不是导航到它，系统将提示用户将其另存为本地文件。
type	MIME类型	链接网址的 MIME 类型。
target	_self、_blank、_parent或_top	在何处显示链接的 URL。
referrerpolicy	no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin或unsafe-url	获取URL时要发送的引荐来源网址。

🌰：

<svg width="500" height="500"  xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG">
    <circle cx="50" cy="40" r="35" />
  </a>
</svg>

<defs>

<defs>元素用于存储稍后将使用的图形对象 。在<defs>元素中创建的对象不会直接呈现。要显示它们，必须先引用它们（通常搭配<use>元素使用）。

<defs>元素是引用元素的容器元素。图形对象可以从任何地方引用，但是建议尽可能在<defs>中定义引用的元素，这样可以提高SVG内容的理解性，并有利于文档的整体可访问性。

<defs>的内容模型与<g>元素的内容模型相同；因此，任何可以是<g>的子元素也可以是<defs>的子元素，反之亦然。

🌰：

<svg width="200" height="200"  xmlns="http://www.w3.org/2000/svg">
  <!-- 储存一个圆 -->
  <defs>
    <circle id="myCircle" cx="100" cy="100" r="50" fill='lightblue' />
  </defs>

  <!-- 使用：通过href属性指向以存储元素的id -->
  <use x="5" y="5" href="#myCircle" />
</svg>

<g>

<g>元素是一个容器元素，用于将相关图形元素组合在一起。通常其子元素为图形元素跟其他容器元素。

应用于<g>元素的属性/转换在它的子元素上执行，它的属性由它的子元素继承。它还可以使用<use>元素对稍后引用的多个元素进行分组。

<g>元素可以任意深度的嵌套在其他<g>元素中。

🌰：

<svg width="200" height="200"  xmlns="http://www.w3.org/2000/svg">

  <!-- 将两个圆组合在一起，<g>元素身上的属性在其子元素身上起作用 -->
  <!-- 呈现为两个填充颜色和轮廓颜色及宽度相同，但是位置不同的圆 -->
  <g fill="lightblue" stroke="lightseagreen" stroke-width="3">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

<marker>

<marker>元素定义了用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或多边形标记的图形。

属性

属性名	值	简介
markerHeight	长度	定义标记视口的高度。
markerWidth	长度	定义标记视口的宽度。
markerUnits	userSpaceOnUse/strokeWidth（默认值）	定义属性markerWidth、markerHeight和<marker>内容的坐标系。
orient	auto/auto-start-reverse/角度	定义标记相对于其附加到的形状的方向。
preserveAspectRatio	(none、xMinYMinxMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax) [(meet、slice)]	如果svg片段嵌入到具有不同纵横比的容器中，则必须如何变形。
refX	left/center/right/坐标	定义标记参考点的x坐标。
refY	left/center/right/坐标	定义标记参考点的y坐标。
viewBox	min-x min-y weight height	定义当前SVG片段的SVG视区边界。

🌰：

<!--对于包含封闭子路径的路径数据，在每个封闭子路径的第一个/最后一个顶点绘制两个标记  -->
<svg width="200" height="200"  xmlns="http://www.w3.org/2000/svg">
 <defs>
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>
  
  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

marker相关属性

marker-start、marker-end和marker-mid属性分别用于定义路径或者线段起始、结束和中间所有顶点的标记。

注意：对于除了<polyline>和<path>的其他元素，如果marker-start和marker-end属性的值不为none，那么在最后一个顶点处会渲染两个标记。

这三个属性都接受一个marker引用，通常是<marker>元素的id，通过url()函数引用<marker>。

<mask>

<mask>元素定义一个alpha蒙版，用于将当前对象合成到背景中 。蒙版使用了CSS的mask属性。

蒙版元素从不直接渲染，它们唯一的用途是可以使用mask属性引用。mask属性与CSS mask属性一样。

注意：opacity、filter和display属性不适用于蒙版元素；因此，即使CSSdisplay属性被设置为非none的值，蒙版元素也不会直接呈现。但即使蒙版元素或其任何祖先元素的display属性被设置为none，蒙版元素也可用于引用。

属性

属性名	值	简介
height	长度	定义遮罩区域的高度。
width	长度	定义遮罩区域的宽度。
maskContentUnits	userSpaceOnUse/objectBoundingBox（默认值）	定义<mask>内容的坐标系。
maskUnits	userSpaceOnUse/objectBoundingBox（默认值）	定义<mask>上的属性x、y、width和height的坐标系。
x	坐标	定义遮罩区域左上角的x轴坐标。
y	坐标	定义遮罩区域左上角的y轴坐标。

• 如果至少指定了x, y, width或height属性中的一个，则给定对象和由x, y, width和height定义的矩形将建立当前剪切路径。蒙版的渲染内容必须通过当前剪切路径进行剪切。

🌰：

<!-- 呈现为一个浅粉色的爱心 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask">
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="white" />
  </mask>

  <circle cx="50" cy="50" r="50" fill="lightpink" mask="url(#myMask)" />
</svg>

<pattern>

<pattern>元素定义了一个图形对象，可以以重复的x和y坐标间隔（"平铺"）重绘该对象以覆盖某个区域 。有点类似于CSSbackground-repeat属性（非no-repeat）的效果。

<pattern>由其他图形元素上的fill和/或stroke属性引用，以使用引用的图案填充或描边这些元素。

SVG的用户代理样式表将<pattern>元素的overflow属性设置为hidden，这将导致在模式块的边界处创建矩形剪切路径。除非overflow属性被重写，否则图案内超出图案矩形的任何图形都将被剪切。

注意，如果overflow属性设置为visible，则模式边界之外的模式的呈现行为目前是未定义的。SVG的未来版本可能需要显示溢出。

属性

属性名	值	简介
href	string	引用模板模式，为<pattern>属性提供默认值。
height	长度/百分比	确定模式平铺的高度。
width	长度/百分比	确定模式平铺的宽度。
patternTransform	转换列表	包含从阵列坐标系到目标坐标系的可选附加变换的定义。
patternContentUnits	userSpaceOnUse/objectBoundingBox（默认值）	定义<pattern>内容的坐标系。
patternUnits	userSpaceOnUse/objectBoundingBox（默认值）	定义<mask>上的属性x、y、width和height的坐标系。
preserveAspectRatio	(none、xMinYMinxMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax) [(meet、slice)]	如果svg片段嵌入到具有不同纵横比的容器中，则必须如何变形。
viewBox	以空格分隔的数字列表	定义模式片段的SVG视口的边界。
x	长度/百分比	定义图案模式平铺的x坐标偏移。
y	长度/百分比	定义图案模式平铺的y坐标偏移。

• 如果存在viewBox属性，则patternContentUnits不起作用。

• <pattern>的内容相对于一个新的坐标系统。如果存在viewBox属性，则使用viewBox和preserveAspectRatio的标准规则，将新的坐标系统安装到由pattern元素上的x、y、width、height和patternUnits属性定义的区域中。如果没有viewBox属性，那么新的坐标系统的原点是(x, y)。

🌰：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="triangle" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0, 0 0, 2 0, 10 5, 5" />
    </pattern>
  </defs>

  <!-- 使用fill或stroke属性引用 -->
  <!-- 呈现为无数个小三角平铺满圆以及轮廓 -->
  <circle cx="50" cy="50" r="50" fill="url(#triangle)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#triangle)" />
</svg>

注意：附加到<pattern>元素内容上的事件属性和事件监听器不会被处理；只处理<pattern>元素的呈现方面。

<switch>

<switch>元素按顺序计算其直接子元素上的任何必需requiredFeatures（不再建议使用）和systemLanguage属性，然后呈现这些属性计算结果为true的第一个子元素。

其他直接子项将被绕过，不会被呈现。如果子元素是容器元素（如<g>），则其子树也会被处理/呈现或绕过/不呈现。

注意：

1. CSSdisplay和visibility属性对<switch>元素处理没有影响。特别是在子项上设置 display:none对<switch>处理的真/假测试没有影响。
2. <switch>元素不影响<script>和<style>元素的处理。

🌰：

<!-- 显示其 systemLanguage 属性与用户语言匹配的第一个子元素 -->
<!-- 
    当浏览器的语言设置为中文时显示浅粉色矩形，英文则显示浅蓝色圆形，
    如果既不是中文或英文，则显示紫色三角形
-->
<svg 
  width="200" 
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  >
  <switch>
    <rect width="100" height="100" fill="lightpink" systemLanguage="zh" />
    <circle cx="50" cy="50" r="50" fill="lightblue" systemLanguage="en" />
    <polygon points="100, 0 200, 100 0, 100" fill="purple" />
  </switch>
</svg>

<symbol>

<symbol>元素用于定义图形模板 ，这些模板可以由<use>元素实例化，但不直接呈现。

<symbol>元素绝不能直接渲染 。它们的唯一用途是可以通过<use>元素引用。用户代理必须将<symbol>元素上的display属性设置为none，作为用户代理样式表的一部分，并且此声明必须比任何其他CSS规则或表示属性重要。

生成的<symbol>实例是<use>元素的直接引用元素，它必须总是有一个内联的display属性的计算值。即当宿主<use>元素被呈现时，它必须被呈现。用户代理样式表再次定义了这个声明，使其重要性高于任何其他CSS规则或表示属性。

对在同一文档中多次使用的图形使用<symbol>元素可增加结构和语义。结构丰富的文档可以以图形方式呈现为语音或盲文，从而提高可访问性。

属性

属性名	值	简介
height	长度/百分比/auto（默认值）	定义<symbol>的高度。
width	长度/百分比/auto（默认值）	定义<symbol>的宽度。
preserveAspectRatio	(none、xMinYMinxMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax) [(meet、slice)]	如果svg片段嵌入到具有不同纵横比的容器中，则必须如何变形。
viewBox	以空格分隔的数字列表	定义当前<symbol>的SVG视口的边界。
refX	长度/百分比/left/center/right	定义<symbol>参考点的x坐标。
refY	长度/百分比/left/center/right	定义<symbol>参考点的y坐标。
x	长度/百分比	定义<symbol>的x坐标。
y	长度/百分比	定义<symbol>的y坐标。

注意：如果width和height属性值为auto）并且没有被实例化的<use>元素上的值覆盖），那么它们的值将被视为100%。

🌰：

<svg width="500" height=500" viewBox="0 0 100 100"xmlns="http://www.w3.org/2000/svg">
  <!-- <symbol>在它自己的坐标系中 -->
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" fill="lightblue" />
  </symbol>

  <!-- 实例化<symbol> -->
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
  <use href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use href="#myDot" x="35" y="5" style="opacity:0.6" />
  <use href="#myDot" x="50" y="5" style="opacity:0.4" />
  <use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>

描述性元素

<title>与<desc>

<title>元素用于为元素添加可访问的短文本描述 。通常用于容器元素和图形元素当中。例如为<a>元素添加目标资源的标题或描述；为<image>元素添加图形描述等。

<desc>与<title>类似，不过它的作用是为元素添加可访问的更详细的文本描述（长文本） 。与<title>通常用于容器元素和图形元素当中。例如：在<image>元素中对图像的外观进行描述；解释某些小部件的功能等。

🌰：

<title>

<title>元素与全局属性HTMLtitle属性类似，在鼠标悬停在其父元素上时显示<title>的内容。而不会成为图形的部分。如果需要让内容可见，那么应该使用具有role="aria-labelledby属性的如<text>等元素，但是使用了之后就不要再使用<title>元素，这样会导致信息冗余。

尽量在SVG文档中为根<svg>元素提供一个直接的<title>元素，并且其内容要符合上下文环境且丰富。

<desc>

<desc>还有一点不同于<title>的地方的是，鼠标悬停在其父元素上时，<desc>的内容作为隐藏文本并不会显示

🌰：

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- <title> -->
  <!-- 鼠标悬停在圆形区域上显示我是一个圆 -->
  <circle cx="50" cy="50" r="50" fill="lightblue" >
    <title>我是一个圆</title>
  </circle>
  
  <!-- <desc> -->
  <circle cx="50" cy="50" r="50" fill="lightblue" >
    <title>我是一个圆心在(50, 50)，半径为50的浅蓝色的圆。</title>
  </circle>
</svg>