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

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

1. <g>08i无知

group, 分组，定义一组元素，初始不可见08i无知

1 2 3 4

<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>08i无知

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

例如：08i无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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>08i无知

使用定义的元素，包括<g>, <defs>, <symbol>08i无知

1 2 3

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

4. <symbol>08i无知

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

1 2 3 4 5 6 7 8

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

转自：https://www.cnblogs.com/mengff/p/11360090.html 08i无知

08i无知

本文为转载文章，版权归原作者所有，不代表本站立场和观点。

很赞哦！ (5) 赏 有话说 (0)