Front End

Appearance

SVG symbol元素 ​

SVG<symbol>元素用来定义可重用的标记。嵌套在<symbol>中的形状不会显示，除非其被<use>元素引用。

symbol示例 ​

下面是一个简单的标记示例：

xml
<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>
<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>元素引用。

preserveAspectRatio和viewBox ​

<symbol>元素可以包含preserveAspectRatio和viewBox属性。然而<g>元素不能包含这两个属性。因此，相比在<defs>元素中使用<g>元素，<symbol>元素可能是生成可重用图形的更好的方式。