図形をグループ化
SVGで図形をグループ化するには、g要素を使用します。
任意の階層にわたり入れ子にすることもできますし、グループ化した図形に対して図形同士に共通する属性を一括で指定することもできます。
構文
<g>
図形
</g>サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<g stroke="green" stroke-width="6" fill-opacity="0.5">
<circle cx="70" cy="60" r="50" fill="blue" />
<circle cx="130" cy="90" r="50" fill="red" />
</g>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<g fill-opacity="0.6">
<circle cx="70" cy="60" r="50" fill="blue" />
<circle cx="130" cy="90" r="50" fill="red" />
<g font-size="20" font-weight="bold">
<text y="60">あいうえお</text>
<text y="80">かきくけこ</text>
</g>
</g>
</svg>