<symbol>

<symbol> 元素用于定义图形模板对象，这些对象可以通过 <use> 元素实例化。

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

示例

html,
body,
svg {
  height: 100%;
}

html

<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" 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>

属性

height: 此属性确定符号的高度。值类型：<length>|<percentage>；默认值：auto；可动画：yes
preserveAspectRatio: 此属性定义如果 SVG 片段嵌入到具有不同纵横比的容器中，则必须如何变形。值类型：(none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)?；默认值：xMidYMid meet；可动画：yes
refX: 此属性确定符号的参考点的 x 坐标。值类型：<length>|<percentage>|left|center|right；默认值：无；可动画：yes
refY: 此属性确定符号的参考点的 y 坐标。值类型：<length>|<percentage>|top|center|bottom；默认值：无；可动画：yes
viewBox: 此属性定义当前符号的 SVG 视口的边界。值类型：<list-of-numbers>；默认值：无；可动画：yes
width: 此属性确定符号的宽度。值类型：<length>|<percentage>；默认值：auto；可动画：yes
x: 此属性确定符号的 x 坐标。值类型：<length>|<percentage>；默认值：0；可动画：yes
y: 此属性确定符号的 y 坐标。值类型：<length>|<percentage>；默认值：0；可动画：yes

使用上下文

类别	容器元素、结构元素
允许的内容	任意数量的以下元素，以任意顺序动画元素描述性元素形状元素结构元素渐变元素 `<a>`、`<clipPath>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`

注意：<symbol> 元素本身不应渲染。只有 <symbol> 元素的实例（即，通过 <use> 元素对 <symbol> 的引用）才会渲染。这意味着某些浏览器即使 CSS display 属性指示其他情况，也可能拒绝直接显示 <symbol> 元素。

规范

规范
可缩放矢量图形 (SVG) 2 # SymbolElement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。