== 図形をまとめて扱う == いくつかの図形をまとめてグループとして扱ったり、図形に名前をつけ名前で図形を参照するための要素です。 * group * symbol * use ---- === グループ === いくつかの図形をまとめてグループとして扱うことができます。 グループをさらにグループの中に含むこともできます。 グループの記述には g 要素を使います。 {{{ }}} この例では２つのグループがあり、一方のグループはもう１つのグループを含んでいます。 . fill属性を外側のグループで指定することで、個々の図形での指定を省略しています。 . 属性の値は継承されます。 . １つ目の長方形は青、２つ目の長方形は赤、３つ目の長方形は黒になります。 ---- === id 属性 === id属性を使って図形やグループには名前をつけることができます。 名前をつけておくと、ほかの場所で使うことができます。 長方形２つからなるグループに rei という名前をつけた例です。 {{{ }}} ---- === use 要素 === 名前をつけた図形やグループを使うには use 要素で記述します。 {{{ }}} これは rei　という名前で定義された図形（グループ）を、位置(100,50)に表示せよという指示になります。 描画する座標(100,50)が、グループreiでの座標(0,0)に対応します。 名前は id 属性で定義されたものです。 参照の書きかたに注意してください。'''xlink:href="#名前"'''　です。 例 {{{ }}} 大小の円を重ねた図形を g要素でグループ化しています。 名前を g1 と付けています。 色はg要素で指定し、個々のcircle要素には記述していません。 use要素でg1を参照し、ｘ方向に１００ずらした位置に描画します。 同じ形の図形が g の箇所と use の箇所の２回描画されます。 ---- === defs内に記述する === ... の内部に書いた要素は、定義だけが行われ、その時点では描画は行われません。 図形の定義だけを行ってその時点では描画をしないで、あとで use で使うことができます。 ... はSVGデータの中に１つしか書けませんでした。 したがって、通常のSVGデータはつぎのような構造になります。 {{{ タイトル スタイルの定義 図形の定義 ... 図形の記述 ... }}} 先ほどの例の g の部分を defs 内に移動し {{{ }}} とすると、描画されるのは use で指定したものだけになります。 ---- === use 要素に style を記述する === use 要素に style を記述することもできます。 下の例では、use要素でstyleを記述し、色を変えて描画しています。 g要素で定義された図形のうち、styleの指定されていない２つのcircleの色はuseで指定したものになります。 ３つのcircleのうち3つ目のものは定義のときにstyleが指定されており、useで指定された色ではなく、circleで指定された色になります。 {{{ }}} ---- === symbol要素 === g の代わりに symbol を用いてグループを作ることもできます。 違いは次の２点です。 １）symbol で定義したグループは（すぐには）描画されない。 . defs内に書かなくても、定義だけが行われ描画されません。 . defs内に書いても同じです。 ２）symbol には viewBox を指定することができる。 {{{ 図形の記述 }}} のように用います。 viewBoxとwidth heightの対応はsvg要素の場合と同じです。