welcome: please sign in

"図形をまとめて扱う"のようなページはありません。

メッセージを消す
location: 図形をまとめて扱う

図形をまとめて扱う

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


グループ

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

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

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


id 属性

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

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


use 要素

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

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

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

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

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

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

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


defs内に記述する

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

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

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

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


use 要素に style を記述する

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


symbol要素

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

1)symbol で定義したグループは(すぐには)描画されない。

2)symbol には viewBox を指定することができる。

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