【SVG专题】SVG 分组

发表于 更新于 分类于 ， 阅读次数：

<g>元素是一个容器，用于将其他SVG元素进行分组。

对<g>元素应用的变换会作用于其子元素，并且其属性会被子元素继承。它还可以将多个元素分组，以便后续通过<use>元素引用。

  • 示例
1
2
3
4
5
6
7
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用 g 继承呈现属性 -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>
  • 效果