Question

我知道SVG有两种方法可以将形状组合在一起并将它们定位为一个集合：嵌套<svg>标记和<g>分组。但是，我看不出它们之间有多大区别。例如，以下两段代码产生完全相同的结果：

使用群组(jsfiddle)： https://jsfiddle.net/8q4on01m/5/

<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g transform="translate(200 200)">
    <rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
  </g>
</svg>

使用<svg> (jsfiddle)：

<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="200" y="200">
    <rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
  </svg>
</svg>

首选/推荐哪一个？每个的优点和缺点，重要特征是什么？我对处理冒泡点击事件问题特别感兴趣。

Answer 1

在您的两个示例中，<svg>和<g>之间没有真正的区别。

但是<svg>可以执行<g>无法做到的许多事情。组只是一个被动的元素分组，他们真正可以做的就是指定一些孩子都继承的属性。

内部<svg>元素建立一个新视口。因此，您可以执行最外层<svg>可以（实际上更多）的所有内容。

例如，通过向内部SVG添加width，height和viewBox属性，您可以扩展其内容。

＆＃13;

<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="200" y="200" width="100" height="100" viewBox="0 0 300 300">
    <rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>

    <rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
  </svg>
</svg>

＆＃13;

这不是一个非常好的例子。相反，从SVG规范中获得look at this one。

SVG嵌套<svg> vs group

1 个答案: