SVG use 标签

简介

<use> 元素可以在 SVG 图像中重用预定义的 SVG 图形;
被重用的图形可以在定义 <defs> 元素的内部或外部。

实例

<svg height="150" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="rect">
            <rect width="60" height="60" fill="white" stroke-width="4"/>
        </g>
        <symbol id="sym01">
            <rect  width="60" height="60" fill="green"/>
        </symbol>
    </defs>
    <symbol id="sym02">
     <rect  width="60" height="60" fill="red"/>
    </symbol>
    <use x="10" y="10" xlink:href="#rect" stroke="green"/>
    <use x="35" y="10" xlink:href="#rect" stroke="blue"/>
    <use x="60" y="10" xlink:href="#rect" stroke="red"/>
    <use xlink:href="#sym01" x="130" y="10"/>
    <use xlink:href="#sym02" x="200" y="10"/>
</svg>

效果:

留下评论

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