SVGネストされた<svg>グループVSG

Question

SVGには、シェイプをグループ化してコレクションとして配置する方法が2つあります。ネストする<svg>タグと<g>のグループ化です。しかし、私はそれらの間に大きな違いは見当たりません。 <svg>(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> 

：グループ(jsfiddle)を使用

：例えば、次の2つのコード片は、正確に同一の結果を生成

<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

あなたの2つの例では、<svg>と<g>の間に実際の違いはありません。

<svg>は、<g>ではできない多くのことを行うことができます。グループは単なる要素のパッシブなグループ化であり、実際に行うことができるのは、すべての子がすべて継承するいくつかのプロパティを指定することだけです。

内部<svg>要素が新しいビューポートを確立します。だから、最外部の<svg>ができることはすべて（実際にはもっと）できます。

例えば、内側のSVGにwidth,heightおよびviewBoxという属性を追加することで、その内容を拡大縮小することができます。

<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を使用してください。