SVG symbol 标签

简介

定义一个图像模板,可以使用 <use> 标签实例化并显示,然后在 SVG 文档中反复使用;
<symbol> 元素本身不会输出任何图像;
<symbol> 元素需要一个ID号,以便以被 <use> 元素引用。
<symbol> 元素可以有 preserveAspectRatio 和 viewBox 属性,
<g> 元素不能拥有这些属性,使用 <symbol> 元素也许是一个更好的选择。

实例

<svg viewBox="0,0,150,50" height="200" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="sym01" viewBox="0,0,100,60">
        <rect x="10" y="10" width="30" height="30" rx="2" ry="2" stroke-width="4" stroke="green" fill="none"/>
        <rect x="40" y="10" width="30" height="30" rx="2" ry="2" stroke-width="4" stroke="blue" fill="none"/>
    </symbol>
    <use xlink:href="#sym01" x="0" y="0" width="90" height="50"/>
    <use xlink:href="#sym01" x="50" y="0" width="80" height="40"/>
    <use xlink:href="#sym01" x="90" y="0" width="70" height="30"/>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注