Logo address

Group

目次

2012/11/08

SVG にとってグループの概念は基本的なのでしょう。それはタグ名がたったの1文字 "g" になっている事からも窺えます。

SVG にとってのグループは強力で、グループの中にさらにグループを設定できる等、いわゆる木構造を形成できます。

g (group)

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

ブラウザによって見え方が異なるかも知れません。
以下に Safari の結果を参考のために載せます。

僕は、これを次のように Python で書いています。

#encoding: utf-8
import svg
c = svg.Canvas(0,0,500,500,map=(-2.5,2.5,2.5,-2.5))
c.grid(1,1)

g0 = c.group(id="G0")
g0.rect(-1,0,1,0.5,stroke="width:3")
g0.text(-0.9,0.2,text="Group Demo",font="Helvetica;size:30")

g1 = c.group(transform="rotate(30) scale(2,2)")
g1.use(0,0,ref="G0")

g2 = c.group(translate=(-1,-1), rotate=-30)
g2.use(0,0,ref="G0")

c.close()

group メソッドは g タグを使って実現されています。

Python/Tk では、タグを使って図形の集団を指定しますが、この方法は次の欠点を持っています。

これらの欠点を除くには、ここで行ったように、グループメソッドを導入し、新しいオブジェクトを生成してくれる必要があります。

なお、回転の方向ですが、SVG 流(時計回り)に合わせられています。

defs (define)

SVG の文書構造における defs タグはグループと良く似ています。違いは、直ちに描画しないで、後に use など、他で使用されるのを待っている事でしょう。defs タグに id を付けても、役に立たないようです。

時計の描画を例に採り上げます。

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

これを生成した Python プログラムを示します。

#encoding: utf-8
import svg
c = svg.Canvas(0,0,400,400,map=(-1.5,-1.5,1.5,1.5),
  style="background:whitesmoke")
c.circle(0,0,r=1,fill="white")

d = c.define()
d.line(0.95,0, 0.85,0,stroke="black;width:3",id="L1")
d.line(0.95,0, 0.75,0,stroke="black;width:8",id="L2")
d.line(-0.3,0,0.6,0,stroke="black;width:8",id="N1")
d.line(-0.33,0,0.85,0,stroke="black;width:8",id="N2")
d1 = d.group(id="N3")
d1.line(-0.25,0,0.6,0,stroke="red;width:3")
d1.circle(0.6,0,r=0.08,stroke="red", fill="red")
d1.circle(0,0,r=0.04,stroke="red", fill="red")
d1.circle(0,0,r=0.01,stroke="white;width:0.5",fill="black")
d.end()

for n in range(0,60):
  c.use(0,0,rotate=(360/60*n),ref="L1")
for n in range(0,12):
  c.use(0,0,rotate=(360/12*n),ref="L2")

c.use(0,0,rotate=(360/12*3)-90,ref="N1")
c.use(0,0,rotate=(360/60*2)-90,ref="N2")
c.use(0,0,rotate=(360/60*37)-90,ref="N3")

c.close()

このプログラムの中の define メソッドは defs タグを生成します。
end メソッドで定義部分は終了します。end メソッドは単に </defs> を添えているのではなく、子グループも終了させます。実は end メソッドは define で生成されたインスタンスだけに作用するのではなく、任意のグルーブに対するメソッドです。