Web编程技术营地
研究、演示、创新

使用 g 元素分组

撰写时间:2026-01-05

修订时间:2026-01-05

g是一个容器,可用其将不同类的子元素进行分组,继而可以统一设置样式、进行图形变换。

统一设置样式

设置图像样式

可在g标签上统一设置fill, stroke等与图像有关的样式。

设置文本样式

可在g标签上统一设置font-family, font-size等与文本有关的样式。

Helvetica Fonts Some other texts. Verdana Fonts Some other texts. Arial Fonts Some other texts.

图形变换

独立的图形变换

可对各组元素进行独立的图形变换。

我们可以随心所欲地将一个或多个子图形进行组合后,再统一进行平移、缩放、旋转等图形变换。

本节的图形数据分别来自可免费使用的fontawesomeiconSvg

累积的变换效果

当有多层嵌套的g时,本级的变换效果将传递给各级嵌套的g,从而形成累积的变换效果。

参考资源

  1. SVG2 Grouping