図形をまとめて扱う

いくつかの図形をまとめてグループとして扱ったり、図形に名前をつけ名前で図形を参照するための要素です。

• group
• symbol
• use

グループ

いくつかの図形をまとめてグループとして扱うことができます。 グループをさらにグループの中に含むこともできます。

グループの記述には g 要素を使います。

•  <g fill="black">
     <g fill="red">
       <rect x="10" y="10" width="30" height="30" fill="blue" />
       <rect x="20" y="20" width="30" height="30" />
     </g>
     <rect x="30" y="30" width="40" height="40" />
   </g>

この例では２つのグループがあり、一方のグループはもう１つのグループを含んでいます。

• fill属性を外側のグループで指定することで、個々の図形での指定を省略しています。
• 属性の値は継承されます。
• １つ目の長方形は青、２つ目の長方形は赤、３つ目の長方形は黒になります。

id 属性

id属性を使って図形やグループには名前をつけることができます。 名前をつけておくと、ほかの場所で使うことができます。

長方形２つからなるグループに rei という名前をつけた例です。

•  <g id="rei">
       <rect x="10" y="10" width="30" height="30" />
       <rect x="20" y="20" width="30" height="30" />
   </g>

use 要素

名前をつけた図形やグループを使うには use 要素で記述します。

•  <use xlink:href="#rei" x="100" y="50" />

これは rei　という名前で定義された図形（グループ）を、位置(100,50)に表示せよという指示になります。 描画する座標(100,50)が、グループreiでの座標(0,0)に対応します。

名前は id 属性で定義されたものです。

参照の書きかたに注意してください。xlink:href="#名前"　です。

例

•  <g id="g1" style="fill:blue; stroke:none;">
       <circle cx="50" cy="20" r="10" />
       <circle cx="50" cy="50" r="20" />
   </g>
   <use xlink:href="#g1" x="100" y="0" />

大小の円を重ねた図形を g要素でグループ化しています。 名前を g1 と付けています。 色はg要素で指定し、個々のcircle要素には記述していません。

use要素でg1を参照し、ｘ方向に１００ずらした位置に描画します。

同じ形の図形が g の箇所と use の箇所の２回描画されます。

defs内に記述する

<defs> ... </defs> の内部に書いた要素は、定義だけが行われ、その時点では描画は行われません。 図形の定義だけを行ってその時点では描画をしないで、あとで use で使うことができます。

<defs> ... </defs>はSVGデータの中に１つしか書けませんでした。 したがって、通常のSVGデータはつぎのような構造になります。

•  <svg ... ...>
       <title>タイトル</title>
       <defs>
           スタイルの定義
           図形の定義
           ...
       </defs>
       図形の記述
       ...
   </svg>

先ほどの例の g の部分を defs 内に移動し

•  <defs>
    <g id="g1" style="fill:blue; stroke:none;">
           <circle cx="50" cy="20" r="10" />
           <circle cx="50" cy="50" r="20" />
        </g>
   </defs>
   <use xlink:href="#g1" x="100" y="0" />

とすると、描画されるのは use で指定したものだけになります。

use 要素に style を記述する

use 要素に style を記述することもできます。 下の例では、use要素でstyleを記述し、色を変えて描画しています。 g要素で定義された図形のうち、styleの指定されていない２つのcircleの色はuseで指定したものになります。 ３つのcircleのうち3つ目のものは定義のときにstyleが指定されており、useで指定された色ではなく、circleで指定された色になります。

•  <defs>
    <g id="g1">
           <circle cx="50" cy="20" r="10" />
           <circle cx="50" cy="50" r="20" />
           <circle cx="50" cy="50" r="5" style="fill:none; stroke:blue;"/>
        </g>
   </defs>
   <use xlink:href="#g1" x="100" y="0" style="fill:#f80; stroke:none;"/>
   <use xlink:href="#g1" x="200" y="0" style="fill:#8ff; stroke:none;" />

symbol要素

g の代わりに symbol を用いてグループを作ることもできます。 違いは次の２点です。

１）symbol で定義したグループは（すぐには）描画されない。

• defs内に書かなくても、定義だけが行われ描画されません。
• defs内に書いても同じです。

２）symbol には viewBox を指定することができる。

•  <symbol id="rei" viewBox="-10 -10 20 20">
     図形の記述
   </symbol>
   
   <use xlink:href="#rei" x="50" y="50" width="100" height="100" />

のように用います。 viewBoxとwidth heightの対応はsvg要素の場合と同じです。