1. 開発者向けのウェブ技術
  2. SVG
  3. リファレンス
  4. 要素
  5. <g>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<g>

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

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

使用コンテキスト

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

属性

この要素には、グローバル属性のみがあります。

DOM インターフェイス

この要素は SVGGElement インターフェイスを実装しています。

例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- プレゼンテーション属性を継承するために g を使う -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

仕様書

仕様書
Scalable Vector Graphics (SVG) 2
# GElement

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告