SVG符号元素

时间:2020-01-09 10:44:27  来源:igfitidea点击:

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