svg复用方式<g>, <defs>, <symbol>, <use>

最新推荐文章于 2025-05-25 08:50:17 发布

转载最新推荐文章于 2025-05-25 08:50:17 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mengff/p/11360090.html

文章标签：

#javascript #ViewUI

svg复用元素的方式主要有 <g>, <defs>, <symbol>, <use>

1. <g>

group, 分组，定义一组元素，初始不可见

<g id="group" fill="red">
   <rect x="10" y="10" width="100" height="100" />
   <rect x="120" y="10" width="100" height="100" />
</g>

2. <defs>

定义一些可供重用的元素，组，普通形状，渐变，mask，滤镜fliter，初始不可见

例如：

<defs>
    <g id="g1">
        <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
        <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
    </g>
    <linearGradient id="a1">
        <stop offset="5%" stop-color="#F00" />
        <stop offset="95%" stop-color="#ff0" />
    </linearGradient>
    <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
    <mask id="mask1"> 
        <rect  x="50" y="50" width="100" height="100" fill="#ccc"/>
        <rect  x="150" y="150" width="50" height="50" fill="#fff"/>
    </mask> 
    <filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
        <feGaussianBlur stdDeviation="5" />
    </filter>
</defs>

3. <use>

使用定义的元素，包括<g>, <defs>

<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>

4. <symbol>

定义可重复使用的符号，初始不显示，能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性

<symbol id="symbol" viewBox="0 0 250 250">
    <rect x="90" y="110" width="100" height="100" />
</symbol>
  
<use id="ant"
     transform="translate(0 110) rotate(10 0 0)"
     fill="red"
     xlink:href="#symbol" />