SVG g defs symbol use元素使用详解

SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像。

g表示分组元素，将多个元素设置为组，实现多个元素如：平移、旋转之类的整体操作；

defs实现元素定义，定义的元素不直接显示在画板上，通过use重用desf、g、symbol定义的元素，实现元素重用；

symbol 兼具<g>的分组功能和<defs>初始不可见的特性，同时可使用viewbox与preserveAspectRatio，在虚拟坐标系中实现图形绘制。

备注：在绘制svg图形时，若未定义viewbox，当图形大小超过绘制面板大小时，绘制的图形直接被截取，但使用viewbox后，画板将按照viewbox定义的边界进行缩放，确保图形能够完整绘制到画板上；

g元素示例：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        width="300" height="200">
    <g id="group" fill="red" transform="translate(50)rotate(110)">
      <rect x="10" y="10" width="100" height="100" />
      <rect x="120" y="10" width="100" height="100" />
    </g>
  </svg>

使用use复用g示例：

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1">
    <g id="group" fill="red" >
      <rect x="10" y="10" width="100" height="100"/>
    </g>
    <use id="one" x="0" y="110" xlink:href="#group"/>
    <use id="two" x="0" y="220" xlink:href="#group" stroke="black" stroke-width="2"/>
  </svg>

备注：在use中使用xlink:href 属性引用相关待复用元素ID，use中x、y坐标是相对于原图形定义的初始坐标的位移坐标，相当于使用了transform="translate(x,y)"

defs示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <rect
            id="defs"
            x="90" y="110"
            width="100" height="100" />
    </defs>
  
    <use id="ant"
         transform="translate(0 110) rotate(10 0 0)"
         fill="red"
         xlink:href="#defs" />
    <rect id="rect"
          fill="blue"
          x="90" y="220"
          width="110" height="110"
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  </svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="400">
    <defs>
        <g id="ShapeGroup">
            <rect x="50" y="50" width="100" height="100" fill="#69C" stroke="red" stroke-width="2"/>
            <circle cx="100" cy="100" r="40" stroke="#00f" fill="none" stroke-width="5"/>
        </g>
    </defs>
    <use xlink:href="#ShapeGroup" transform="translate(-10,0) scale(0.5)"/>
    <use xlink:href="#ShapeGroup" transform="translate(10,10) scale(1)"/>
    <use xlink:href="#ShapeGroup" transform="translate(50,60) scale(1.5)"/>
</svg>

symbol示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <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" />
    <rect id="rect"
          fill="blue"
          x="90" y="220"
          width="110" height="110"
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  
  </svg>

扫描二维码关注公众号，回复： 3600596 查看本文章

SVG g defs symbol use元素使用详解

猜你喜欢