SVG <symbol> 元素

SVG <symbol>元素用于定义可重复使用的符号。 除非被 <use>元素引用,否则不会显示嵌套在 <symbol>内的形状。

symbol元素用来定义一个图形模板对象,它可以用一个<use>元素示例化。symbol元素对图形的作用是在同一文档中多次使用,添加结构和语义。结构丰富的文档可以更生动地呈现出来,类似讲演稿或盲文,从而提升了可访问性。注意,一个symbol元素本身是不呈现的。只有symbol元素的示例(亦即,一个引用了symbol的 <use>元素)才能呈现。

符号示例

这是一个简单的符号symbol示例:

<svg width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" />
    </symbol>

    <use xlink:href="#shape2" x="50" y="25" />
</svg>
测试看看‹/›

<symbol>元素需要一个id,以便<use>元素引用。

reserveAspectRatio和viewBox

<symbol>元素可以具有prepareAspectRatio和viewBox属性。  <g>不能具有这两个属性。 因此,与在<defs>元素内使用<g>元素相比,<symbol>元素可能是重用形状的更好方法。