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

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

巴特西

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

最新文章

热门文章