SVG defs 标签

简介

定义重复使用的图形元素,可以增加 SVG 内容的易读性和可访问性;
定义的图形元素不会直接呈现;
利用 <use> 元素呈现这些元素;

实例

定义一个渐变和一个样式,并且使用它;

<svg width="250" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="Gradient1">
            <stop class="stop1" offset="20%"/>
            <stop class="stop2" offset="50%"/>
            <stop class="stop3" offset="100%"/>
        </linearGradient>
        <style type="text/css"><![CDATA[
            #rect1 { fill: url(#Gradient1); }
            .stop1 { stop-color: green; }
            .stop2 { stop-color: blue; }
            .stop3 { stop-color: red; }
      ]]></style>
    </defs>
    <rect x="10" y="10"  width="200" height="100" id="rect1"/>
</svg>

效果:

留下评论

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