SVG嵌套<svg> vs组

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>（实际上更多）的一切。

例如，通过将width,height和viewBox属性添加到内部SVG，可以缩放其内容。

<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>

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