<g>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

示例

html
<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>

使用上下文

类别容器元素、结构元素
允许的内容任意数量、任意顺序的下列元素：
动画元素
描述性元素
形状元素
结构化元素
渐变元素
<a>、<clipPath>、<cursor>、<filter>、<font>、<font-face>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>

规范

Specification
Scalable Vector Graphics (SVG) 2
# GElement

浏览器兼容性

BCD tables only load in the browser