<g>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<g>SVG の要素で、他の SVG 要素をグループ化するために用いられるコンテナーです。

<g> 要素に適用された座標変換は、その全ての子要素に対して実行されます。適用された属性は子要素に継承されます。加えて、多数のオブジェクトをグループ化しておくと後に <use> 要素で参照することができます。

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

使用可能な場所

カテゴリーコンテナー要素、構造的要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a><clipPath><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# GElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
g
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support