English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG <g>要素は、SVG形状をグループ化するために使用されます。グループ化された後、全体の形状を単一の形状のように変換することができます。これは、独立して変換のターゲットとすることができないネストされた<svg>要素よりも利点があります。さらに、グループ化された要素のスタイルを設定し、単一の要素のように繰り返し使用することができます。
要素gは、オブジェクトを組み合わせるためのコンテナです。g要素に追加された変換は、そのすべての子要素に適用されます。g要素に追加された属性は、そのすべての子要素に継承されます。さらに、g要素は複雑なオブジェクトを定義し、後に<use>要素を通じて参照することができます。
これはシンプルなSVG <g>例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> oldtoolbag.com 基本チュートリアル</text> </g> </svg>テストを試してみてください ‹/›
実行後の画像効果は：
この例では、<g>要素で組み合わせられたものが示されています3個の形状。 ここに示されるように、このグループには特に利点はありません。 ただし、<g>要素の変換をリクエストするときに何が起こるか注意してください。 これはコードです：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> oldtoolbag.com 基本チュートリアル</text> </g> </svg>テストを試してみてください ‹/›
実行後の画像効果は：
注意<g>要素内のすべての形状がポイントを中心にどのように回転するか50,50回転45度。
<g>要素のCSSスタイルはその子要素から継承されます。これは例です：
<svg width="320" height="150"><g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000"> <rect x="10" y="10" width="100" height="50" /> <circle cx="150" cy="35" r="25" /> <circle cx="250" cy="35" r="25" style="stroke: #009900; fill: #00ff00;/> </g> </svg>テストを試してみてください ‹/›
本例では<g>3つのサブ要素を持つ要素があります。この<g> 要素にはstyle属性があります。前2つのサブ要素にはstyle属性があります。したがって、要素内で定義されたスタイル<g>属性を継承します。これらのサブ要素の第3要素にはstyle線と塗りつぶし色を設定する属性ですが、それでもこの<g>要素のstroke-width属性です。
実行後の画像効果は：
ネストされた<svg>要素内の形状をグループ化するよりも、<g>要素内の全ての形状を変換する能力が利点です。<svg>要素は自身で変換することができません。変換するには、<svg>要素を<g>要素内にネストする必要があります。
ただし、<svg>要素に比べて、<g>要素には欠点があります。<g>要素はxとy属性を持っていません。<g>要素の内容を移動するには、transform属性を使用して「translate」関数を使用する必要があります、例えば：transform ="translate(x,y)"。
xとy属性を使用して<g>要素内に全ての形状を移動する必要がある場合、<g>要素は<svg>要素内にネストする必要があります。<svg>要素にはxとy属性があります。これは例です：
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> oldtoolbag.com 基本チュートリアル</text> </g> </svg>テストを試してみてください ‹/›
この例では、<g>要素内の全ての形状は、 <svg>要素内に設定することを意味します。<svg>のx属性を100。これは、まず内の形状<g>を変換し、x軸に移動100、なぜなら<svg>位置x = 100。実行後の画像効果は：
を切り替え、<svg>要素が<g>要素内、以下のようになります：
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <svg x="100"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600; "></line> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect> <text x="10" y="90" style="stroke: #660000; fill: #660000">oldtoolbag.com 基本チュートリアル</text> </svg> </g> </svg>テストを試してみてください ‹/›
その後、形状はまずx軸に沿って動きます100、なぜなら<svg>要素の位置はx="100"、そしてその位置から50,50回転45度。結果は以下の通りです:
これらの画像は似ているように見えますが、異なります。異なる点は、動きと回転の順序です。詳しく見ると、画像上にそれが見られます。表示される形状が均等に配置されていません。 また、最初の画像がx方向でポイントで表示されている場合でも、これも同じです。この場合、まず形状が回転され、その後、回転部分のテキストが画像から突出しています。 その後、左に移動すると、まだテキストの一部が欠けています。