svg復用方式 , , ,

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>, <symbol>

<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" />