使用 g 元素分组
撰写时间:2026-01-05
修订时间:2026-01-05
g是一个容器,可用其将不同类的子元素进行分组,继而可以统一设置样式、进行图形变换。
统一设置样式
设置图像样式
可在g标签上统一设置fill, stroke等与图像有关的样式。
设置文本样式
可在g标签上统一设置font-family, font-size等与文本有关的样式。
图形变换
独立的图形变换
可对各组元素进行独立的图形变换。
我们可以随心所欲地将一个或多个子图形进行组合后,再统一进行平移、缩放、旋转等图形变换。
本节的图形数据分别来自可免费使用的fontawesome及iconSvg。
累积的变换效果
当有多层嵌套的g时,本级的变换效果将传递给各级嵌套的g,从而形成累积的变换效果。
