SVG g 元素

2025 年 3 月 17 日 | 阅读 1 分钟

SVG <g> 元素将 SVG 形状组合在一起。当 SVG 形状组合在一起时，您可以转换整个形状组。这是 <g> 元素优于嵌套 <svg> 元素的优势。

示例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.javatpoint.org/2000/svg"
    xmlns:xlink="http://www.javatpoint.org/1999/xlink">
    
    <g>
      <line x1="10" y1="10" x2="90" y2="10"
          style="stroke:green;"/>

      <rect x="10" y="25" height="45" width="80"
          style="stroke: black; fill: red; stroke-width:2"/>

      <text x="10" y="100" style="stroke: blue; fill:orange">
        Text grouped with shapes</text>
    </g>

</svg>

</body>
</html>

立即测试

下一个主题SVG defs 元素

← 上一步下一步 →