25.SVG-symbol元素.md

SVG symbol元素

---

• symbol示例
• preserveAspectRatio和viewBox

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

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape2" x="50" y="25"></use>

preserveAspectRatio和viewBox

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