Fill Rule

例1

一筆書きで描けるような簡単な図形でも、それを塗りつぶす複数の考え方がある。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
import svg
from math import cos,sin,pi
c = svg.Canvas(0,0,400,300)

def star(x0,y0,r):
  t = []
  for n in range(0,5):
    x = r*cos(pi/180*144*n) + x0
    y = r*sin(pi/180*144*n) + y0
    t = t + [x,y]
  return t

t = star(100,150,50)
c.polygon(t,stroke="red",fill="black;rule:nonezero")

t = star(300,150,50)
c.polygon(t,stroke="red",fill="black;rule:evenodd")
c.close()

同じ図形を複数扱いたい場合には、通常は use を使う。ここでは初等的な方法で書いた。(useを使えば、ファイルサイズが小さくなる)

塗りつぶし方(fill rule)を指定している nonezero と evenodd に関しては

http://www.w3.org/TR/SVG/painting.html#FillRuleProperty

に解説されている。

例2

2つの星形を、近づけて、1つのグループにまとめ、そのグループに対して fill rule を指定してみた。

この結果を見ると、fill rule はグループ内の1つ1つの星形に独立して作用している。
これは SVG の特性である。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
import svg
from math import cos,sin,pi
c = svg.Canvas(0,0,400,300)

def star(x0,y0,r):
  t = []
  for n in range(0,5):
    x = r*cos(pi/180*144*n) + x0
    y = r*sin(pi/180*144*n) + y0
    t = t + [x,y]
  return t

#g = c.group(fill="black;rule:nonezero")
g = c.group(fill="black;rule:evenodd")

t = star(150,150,100)
g.polygon(t,stroke="red")

t = star(250,150,100)
g.polygon(t,stroke="red")
c.close()