SVG g元素用法详解

SVG <g>元素将SVG形状组合在一起。将SVG形状分组后, 即可变换整个形状组。这是<g>元素优于嵌套的<svg>元素的优势。

例子

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.srcmini.org/2000/svg"
    xmlns:xlink="http://www.srcmini.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>

立即测试

例子

猜你喜欢