g

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

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

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

属性

この要素はグローバル属性のみを含みます。

グローバル属性

コア属性
特に: id, tabindex
スタイリング属性
class, style
条件処理属性
特に: requiredExtensions, systemLanguage
イベント属性
グローバルイベント属性, グラフィカルイベント属性
プレゼンテーション属性
特に: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria属性
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

利用ノート

カテゴリーコンテナー要素 、 構造的要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a><altGlyphDef><clipPath><color-profile><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<g> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<g> の定義
勧告 最初の定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
gChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応