<symbol>
<symbol> SVG 元素用于定义图形模板对象，这些对象可以由 <use> 元素进行实例化。
使用 <symbol> 元素处理在同一文档中多次使用的图形，可以增加结构和语义。富含结构性的文档可以通过图形、语音或盲文进行渲染，从而提高可访问性。
使用语境
属性
height-
此属性确定 symbol 的高度。值类型：<length> | <percentage>；默认值：
auto；可动画：是 保持长宽比-
此属性定义了当 SVG 片段嵌入到具有不同 纵横比 的容器中时，SVG 片段必须如何变形。值类型：（
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax）（meet|slice)?; 默认值：xMidYMid meet；可动画：是 refX-
此属性确定 symbol 的参考点的 x 坐标。值类型：<length> | <percentage> |
left|center|right；默认值：无；可动画：是 refY-
此属性确定 symbol 的参考点的 y 坐标。值类型：<length> | <percentage> |
top|center|bottom；默认值：无；可动画：是 视图框-
此属性定义了当前 symbol 的 SVG 视口的边界。值类型：<list-of-numbers>；默认值：无；可动画：是
width-
此属性确定 symbol 的宽度。值类型：<length> | <percentage>；默认值：
auto；可动画：是 x-
此属性确定 symbol 的 x 坐标。值类型：<length> | <percentage>；默认值：
0；可动画：是 y-
此属性确定 symbol 的 y 坐标。值类型：<length> | <percentage>；默认值：
0；可动画：是
DOM 接口
此元素实现了 SVGSymbolElement 接口。
示例
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" opacity="1.0" />
<use href="#myDot" x="20" y="5" opacity="0.8" />
<use href="#myDot" x="35" y="5" opacity="0.6" />
<use href="#myDot" x="50" y="5" opacity="0.4" />
<use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # SymbolElement |
浏览器兼容性
加载中…