図形をまとめて扱う

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

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要素の場合と同じです。