32008-08-21 12:53:12masahiko22008-08-21 12:51:33masahiko12008-08-21 12:47:41masahiko

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

いくつかの図形をまとめてグループとして扱うことができます。 グループをさらにグループの中に含むこともできます。 グループの記述には g 要素を使います。 ]]>この例では２つのグループがあり、一方のグループはもう１つのグループを含んでいます。 fill属性を外側のグループで指定することで、個々の図形での指定を省略しています。 属性の値は継承されます。 １つ目の長方形は青、２つ目の長方形は赤、３つ目の長方形は黒になります。

id属性を使って図形やグループには名前をつけることができます。 名前をつけておくと、ほかの場所で使うことができます。 長方形２つからなるグループに rei という名前をつけた例です。 ]]>

名前をつけた図形やグループを使うには use 要素で記述します。 ]]>これは rei　という名前で定義された図形（グループ）を、位置(100,50)に表示せよという指示になります。 描画する座標(100,50)が、グループreiでの座標(0,0)に対応します。 名前は id 属性で定義されたものです。 参照の書きかたに注意してください。xlink:href="#名前"　です。 例 ]]>大小の円を重ねた図形を g要素でグループ化しています。 名前を g1 と付けています。 色はg要素で指定し、個々のcircle要素には記述していません。 use要素でg1を参照し、ｘ方向に１００ずらした位置に描画します。 同じ形の図形が g の箇所と use の箇所の２回描画されます。

<defs> ... </defs> の内部に書いた要素は、定義だけが行われ、その時点では描画は行われません。 図形の定義だけを行ってその時点では描画をしないで、あとで use で使うことができます。 <defs> ... </defs>はSVGデータの中に１つしか書けませんでした。 したがって、通常のSVGデータはつぎのような構造になります。 スタイルの定義 図形の定義 ... 図形の記述 ... ]]>先ほどの例の g の部分を defs 内に移動し ]]>とすると、描画されるのは use で指定したものだけになります。

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

g の代わりに symbol を用いてグループを作ることもできます。 違いは次の２点です。 １）symbol で定義したグループは（すぐには）描画されない。 defs内に書かなくても、定義だけが行われ描画されません。 defs内に書いても同じです。 ２）symbol には viewBox を指定することができる。 図形の記述 ]]>のように用います。 viewBoxとwidth heightの対応はsvg要素の場合と同じです。