SVG结构相关元素

• g元素

  g元素是分组元素，用于在逻辑上将相关的元素进行分组。给g元素添加的样式或者属性都会被应用到它所有的子元素上。如下示例所示，想对三个圆进行移动，可以直接在g上进行操作，这样既达到了移动的目的，也没有破坏他们之间的位置关系。

  <svg width='100%' height='100'>
      <g transform='translate(50,50)'>
          <circle cx='10' cy='10' r='5' />
          <circle cx='30' cy='10' r='5' />
          <circle cx='50' cy='10' r='5' />
      </g>
  </svg>
  						

• title元素和desc元素

  这两个标签可以用在g元素中使用，添加一些描述性的信息，使其更容易被屏幕阅读器解读，让代码的整体可读性更好。

• use元素

  该元素可以实现元素的重用，可以重用单个元素，也可以重用一组元素。use元素复制出的副本的样式和初始元素一样，不能覆盖初始元素的样式。其上的属性如下：

  1. x属性和y属性，重用的元素的位置。这两个属性是相对被重用的元素的位置来定位的。
  2. width属性和height属性，重用元素的宽高。
  3. xlink:href属性，引用内容的url，如id值。

  示例如下：

  <svg>
      <g id='circles' transform='translate(100,100)'>
          <circle cx='10' cy='10' r='5' />
          <circle cx='30' cy='10' r='5' />
          <circle cx='50' cy='10' r='5' />
      </g>
      <use x='10' y='10' xlink:href='#circles' />
  </svg>
  						

• defs元素

  该元素可以存储我们想重用的元素，但是不渲染它们，等到后面再被其他SVG元素应用或显示。defs元素的副本的x和y是相对于用户坐标系统来定位的。其副本可以用use元素来创建。示例如下：

  <svg>
      <defs>
          <linearGradient id="gradient">
              <stop offset="0%" style="stop-color: deepPink"></stop>
              <stop offset="100%" style="stop-color: #009966"></stop>
          </linearGradient>
      </defs>
      <rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>
  </svg>
  						

• symbol元素

  该元素和g元素相似，它提供了一种对元素进行分组的方式。该元素不会被渲染，同时它可以有自己的viewBox和preserveAspectRatio属性。

参考资料

• SVG中的结构化、分组和引用元素