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。