Clip

2012/11/13

ライブラリの clip メソッドは SVG の clipPath に対応する。

例1

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

#encoding: utf-8
import svg
c = svg.Canvas(0,0,800,600,map=(-400,-300,400,300))
h = c.clip(id="C",clip="rule:nonezero")
h.circle(0,0,r=200)
c.image(-400,-300,400,300,clip="path:url(#C)",href="bird.jpg")
c.close()

なお、例1でバックの白色が消えたのは、HTML5 の記述で style="background-color:white" を指定していないからである。つまり

<object type="image/svg+xml" data="image.svg" width="80%" height="100%">

となっている。

他の例は全て

<object type="image/svg+xml" data="clippath2.svg" width="80%" height="100%" style="background-color:white">

となっているので、白色のバックグランドが背景に現れている。

例2

文字を使ってもクリップできる。

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

#encoding: utf-8
import svg
c = svg.Canvas(0,0,800,600,map=(-400,-300,400,300))
h = c.clip(id="C",clip="rule:nonezero")
h.text(0,0,text="ABC",font="size:256",anchor="C")
c.image(-400,-300,400,300,clip="path:url(#C)",href="bird.jpg")
c.close()

例3

次の図形は、文字列 "ABC" を3つの図形でクリップしている。クリップの方法は

nonezero
evenodd

から選ぶ。この例では evenodd が指定されている。

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

#encoding: utf-8
import svg
from math import cos,sin,pi

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,60)

c = svg.Canvas(0,0,400,300)
#h = c.clip(id="MyClip",clip="rule:nonezero")
h = c.clip(id="MyClip",clip="rule:evenodd")
h.polygon(100,200,300,0,200,200)
h.polygon(100,100,300,100,300,150)
h.polygon(t)
#h.end()
c.text(200,150,text="ABC",font="Helvetica;size:128",anchor="C",clip="path:url(#MyClip)")
c.polygon(100,200,300,0,200,200,stroke="red")
c.polygon(100,100,300,100,300,150,stroke="blue")
c.polygon(t)
c.close()

クリップを行っているのは3つの polygon である。これらは1つのグループに纏められ、そのグループに対して、クリップルール evenodd が指定されている。

コメントアウトされている

h.end()

であるが、"#" を取り除いて、これを生かしてもよい。これを入れると、

<clipPath id="MyClip" ....>

が、この id を参照する

<text ... clip-path="url(#MyClip)">

より前に来る事が保証される。このケースでは、これをコメントアウトすると後方参照になっていた。しかし、それでも問題ないと言う事は、SVG は id の前方参照を要求しないと言う事だろう。

SVG の clipPath と言う名前は誤解を生む。SVG の path タグを使わなくても、マスクに多様な図形が使える。例えば circle も OK である。