SVG <g>元素用于将SVG形状分组在一起。分组后,您可以像变形单个形状一样变换整个形状。与 不能单独成为转换目标的嵌套 <svg>元素相比,这是一个优势。您还可以设置分组元素的样式,并像对待单个元素一样重复使用它们。
元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外,g元素也可以用来定义复杂的对象,之后可以通过<use>元素来引用它们。
这是一个简单的SVG <g>
示例:
<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"> (thinktus.com) 森客兔子</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"> (thinktus.com) 森客兔子</text> </g> </svg>测试看看 ‹/›
运行后图像效果:
注意<g>
元素中的所有形状如何围绕点50,50旋转45度。
<g>
元素 的CSS样式由其子元素继承。这是一个示例:
<svg width="320" height="150"><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> </svg>测试看看 ‹/›
本示例定义了一个<g>
具有三个子元素的元素。该<g>
元素具有一个style
属性。前两个子元素没有style
属性。因此,元素中定义的样式<g>
被这些子元素继承。第三个子元素具有一个style
设置笔触和填充颜色的属性,但它仍继承该<g>
元素的stroke-width
属性。
运行后图像效果:
与将嵌套的<svg>元素内的形状分组相比,转换<g>元素内的所有形状的能力是一个优势。 <svg>元素不能自行转换。 您必须将<svg>元素嵌套在<g>元素内,以转换其嵌套形状。
不过,与<svg>元素相比,<g>元素有一个缺点。 不能仅通过更改<g>元素的x和y属性来移动包括所有嵌套形状的<g>元素。 <g>元素没有x和y属性。 要移动<g>元素的内容,只能使用transform属性使用“ translate”函数,例如:transform ="translate(x,y)"。
如果需要使用x和y属性在<g>元素内移动所有形状,则需要将<g>元素嵌套在<svg>元素内。 <svg>元素具有x和y属性。 这是一个实例:
<svg width="320" height="150"> <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"> (thinktus.com) 森客兔子</text> </g> </svg>测试看看 ‹/›
在此示例中,<g>
元素内的所有形状都嵌套在 <svg>
元素内。请注意,将<svg>
的x属性设置为100。这意味着首先对内的形状<g>
进行转换,然后沿x轴移动100,因为<svg>
位置x = 100。运行后图像效果:
您还可以切换嵌套,将<svg>
元素嵌套在<g>
元素内 ,如下所示:
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <svg x="100"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect> <text x="10" y="90" style="stroke: #660000; fill: #660000">(thinktus.com) 森客兔子</text> </svg> </g> </svg>测试看看 ‹/›
然后,形状首先沿着x轴移动100,因为<svg>元素的位置是x="100",然后从该位置绕点50,50旋转45度。结果如下:
这两个图像可能看起来相似,但是有所不同。 不同之处在于执行运动和旋转的顺序。 如果仔细观察,还可以在图像上看到。 显示的形状放置不均。 此外,请注意,即使第一个图像在x方向上以点点的方式显示在图像中,也是如此。 发生这种情况是因为首先旋转了形状,然后在旋转部分中文本伸出了图像。 此后向左移动时,仍然缺少缺少的文本部分。