SVG <g>元素用于将SVG形状分组在一起。分组后，我们可以像变形单个形状一样变换整个形状。与不能单独作为转换目标的嵌套 <svg>元素相比，这是一个优势。

我们还可以设置分组元素的样式，并像对待单个元素一样重复使用它们。

SVG g示例

这是一个简单的SVGg示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <g>
      <line x1="10" y1="10" x2="85" y2="10"
          style="stroke: #006600;"/>

      <rect x="10" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>

</svg>

文字按形状分组

此示例显示了在<g>元素中组合在一起的3个形状。如此处所列，在此分组中没有特别的好处。但是请注意当我们请求转换<g>元素时会发生什么。这是代码：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <g transform="rotate(45 50 50)">
      <line x1="10" y1="10" x2="85" y2="10"
          style="stroke: #006600;"/>

      <rect x="10" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>

</svg>

文字按形状分组

注意<g>元素内的所有形状如何围绕点50,50旋转45度。

g元素的样式由其子元素继承

<g>元素的CSS样式由其子元素继承。这是一个例子：

<g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000">
    <rect    x="10"  y="10" width="100" height="50" />
    <circle cx="150" cy="35" r="25" />
    <circle cx="250" cy="35" r="25"
           style="stroke: #009900; fill: #00ff00;"/>
</g>

这个例子定义了一个带有三个子元素的<g>元素。 <g>元素具有style属性。前两个子元素不具有style属性。因此，在<< g>元素中定义的样式被这些子元素继承。第三个子元素具有一个"样式"属性，用于设置笔触和填充颜色，但是它仍然继承了<g>元素的"笔划宽度"。

缺点：G元素没有X和Y属性

与将嵌套的<svg>元素中的形状分组相比，能够转换" <g>"元素中的所有形状的优势是一个优势。 <svg>元素不能自己转换。我们必须将<svg>元素嵌套在<g>元素内，以转换其嵌套形状。

不过，与<svg>元素相比，<g>元素具有一个缺点。我们不能仅通过更改<g>元素的x和y属性来移动包括所有嵌套形状的" <g>"元素。 <g>元素没有x和y属性。要移动 <g>元素的内容，我们只能使用" translate"函数，使用transform属性，就像这样：

如果需要使用x和y属性在 <g>元素内移动所有形状，则需要将 <g>-element嵌套在 <svg>-element内。 <svg>元素具有x和y属性。这是一个例子：

<svg x="100"
    <g transform="rotate(45 50 50)">
        <line x1="10" y1="10" x2="85" y2="10"
            style="stroke: #006600;"/>

        <rect x="10" y="20" height="50" width="75"
            style="stroke: #006600; fill: #006600"/>

        <text x="10" y="90" style="stroke: #660000; fill: #660000">
          Text grouped with shapes</text>

    </g>
  </svg>

在此示例中，元素<g>中的所有形状都嵌套在元素<svg>中。注意，<svg>具有x属性设置为100。这意味着首先对<g>中的形状进行转换，然后沿x轴移动100，因为<svg>是位于x = 100。

文字按形状分组

我们还可以切换嵌套，然后将<svg>元素嵌套在<g>元素内，如下所示：

<g transform="rotate(45 50 50)">
    <svg x="100"
        <line x1="10" y1="10" x2="85" y2="10"
            style="stroke: #006600;"/>

        <rect x="10" y="20" height="50" width="75"
            style="stroke: #006600; fill: #006600"/>

        <text x="10" y="90" style="stroke: #660000; fill: #660000">
          Text grouped with shapes</text>

    </svg>
  </g>

然后，将形状首先沿x轴移动100，因为 <svg>元素位于x =" 100"，然后从该位置绕点50、50旋转了45度。

文字按形状分组

这两个图像可能看起来相似，但是有所不同。差异包括运动和旋转的执行顺序。如果仔细观察，我们也可以在图像上看到它。显示的形状放置不均。此外，请注意，即使第一个图像在x方向上以点点的方式显示在图像中，也是如此。发生这种情况是因为首先旋转了形状，然后在旋转中，文本的一部分伸出了图像。此后向左移动时，仍然缺少缺少的文本部分。