円弧あるいは扇型は SVG では path tag を使って書く。しかし、この生の形式は非常に扱いにくい。
path tag を使った場合には、arc は2つの点を通り、与えられた半径(X方向とY方向の2つ)の楕円の一部を描く。
そのような楕円は2つあり、切り取る弧が各々について2通りの可能性があるので、4通りの可能な円弧から1つを選択するフラグを指定することとなる。上の図では、(0,1) と (2,0) を通り、半径が (2,1) の楕円が2つ描かれている。楕円の弧は、点(0,1)と点(2,0) を端点として、合計4つの弧が生まれている。
path の A 命令のパラメータの中には、弧の1つを選択するためのフラグが2つ存在する。次のプログラムがフラグの使い方を示している。
この SVG ファイルを生成する Python のコードは
#encoding: utf-8
import svg
c = svg.Canvas(0,0,600,500,map=(-2,3,4,-2))
pat0 = c.pattern("cross",stroke="red",scale=(1.5,1.5))
pat1 = c.pattern("diagonal2",stroke="green",scale=(2,1))
pat2 = c.pattern("horizontal",stroke="blue")
pat3 = c.pattern("grid",stroke="black")
c.grid(1,1,stroke="cyan")
c.path("M 0 0 h 2 A 2 1 0 0 0 0 1 Z", stroke="red;width:2", fill=pat0)
c.path("M 0 0 h 2 A 2 1 0 0 1 0 1 Z", stroke="green;width:2", fill=pat1)
c.path("M 0 0 h 2 A 2 1 0 1 0 0 1", stroke="blue;width:2", fill=pat2)
c.path("M 0 0 h 2 A 2 1 0 1 1 0 1", stroke="black;width:2", fill=pat3)
c.text(0,0,text="(0,0)",font="size:15",anchor="NW")
c.text(2,0,text="(2,0)",font="size:15",anchor="NW")
c.text(0,1,text="(0,1)",font="size:15",anchor="SE")
c.close()
このプログラムの中の path 関数は、SVG とのインターフェースを担う low level の関数である。
A 命令の後の3つ目のパラメータは回転角を表している。SVG では正の回転は時計回りである。つまり SVG の回転の向きは、Python/Tk とは逆である。次に30度の回転を指示した場合の図を示す。
この SVG ファイルを生成する Python のコードは
#encoding: utf-8
import svg
c = svg.Canvas(0,0,600,500,map=(-2,3,4,-2))
pat0 = c.pattern("cross",stroke="red",scale=(1.5,1.5))
pat1 = c.pattern("diagonal2",stroke="green",scale=(2,1))
pat2 = c.pattern("diagonal1",stroke="blue")
pat3 = c.pattern("grid",stroke="black")
c.grid(1,1,stroke="cyan")
c.path("M 0 0 h 2 A 2 1 30 0 0 0 1 Z", stroke="red;width:2", fill=pat0)
c.path("M 0 0 h 2 A 2 1 30 0 1 0 1 Z", stroke="green;width:2", fill=pat1)
c.path("M 0 0 h 2 A 2 1 30 1 0 0 1", stroke="blue;width:2", fill=pat2)
c.path("M 0 0 h 2 A 2 1 30 1 1 0 1", stroke="black;width:2", fill=pat3)
c.text(0,0,text="(0,0)",font="size:15",anchor="NW")
c.text(2,0,text="(2,0)",font="size:15",anchor="NW")
c.text(0,1,text="(0,1)",font="size:15",anchor="SE")
c.close()
arc 関数を Python/Tk 流に実装した。角度の向きは Tk と同じである。これは Tk の create_arc に近い。(僕は、数学的な習慣の方が好きである。)
arc 関数では回転を指定できる。回転の向きは SVG と同じく時計回りである。この事は首尾一貫しないのであるが、これを変更すると、他の SVG の命令との整合性が採れなくなる恐れがある。(もっとも arc 関数で回転を指定するニーズがどの程度あるか怪しい。)
この SVG ファイルを生成する Python のコードは
#encoding: utf-8
import svg
c = svg.Canvas(0,0,600,500,map=(-3,2.5,3,-2.5))
pat0 = c.pattern("cross",stroke="red",scale=(1.5,1.5))
c.grid(1,1,stroke="cyan")
c.circle(0,0,r=(2,1))
c.arc(0,0,r=(2,1),start=-15,extent=60,fill="green")
c.arc(0,0,r=(2,1),start=85,extent=30,shape="sector",fill="blue")
c.arc(0,0,r=(2,1),start=145,extent=210,shape="sector",fill=pat0)
c.text(0,0,text="(0,0)",font="size:15",anchor="NW")
c.text(2,0,text="(2,0)",font="size:15",anchor="NW")
c.text(0,1,text="(0,1)",font="size:15",anchor="SE")
c.close()
楕円の場合の「角度」は、注意が必要である。ここでは、最初の緑で塗りつぶされた弦の弧は、この図のように、60度には見えない。楕円が円に見えるように、左右の方向に2倍に圧縮して、ようやく指定した60の角度になる。この現象は Python/Tk も同じである。そして、それは正しい考え方である。(楕円は円を斜めから見たものであると考えている)
iPad Safari では、図を拡大した時に塗りつぶしパターンにジャギーがでる。実はジャギーを押さえる工夫がされているのだが、iPad Safari では、(現在のところ)その効果がない。Mac の Safari (5.17) は、工夫通りに見え、図の塗りつぶしパターンは紙への印刷に耐えられる。
なお、斜め線のパターンをよく見ると、線が繋がっていないことがわかる。この現象はネット上でも指摘されているが、SVG の仕様なのかもしれない。(これをうまく処理する方法は、今のところ、僕は知らない。)