Gradient

2012/11/11

Linear Gradient

次の図は Linear Gradient の効果を示す。

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

#encoding: utf-8
import svg
c = svg.Canvas(0,0,400,200,map=(-1.5,1.5,1.5,-1.5))
d = c.define()
d.svgout("linearGradient",'id="MyGradient"',
"""<stop offset="30%" stop-color="#F60" />
<stop offset="70%" stop-color="#FF6" />"""
)
d.end()

c.rect(-1,-1,1,1,stroke="black",fill="url(#MyGradient)")
c.line(-1 + 2*0.3,1,-1 + 2*0.3,-1,stroke="dasharray:5 5")
c.line(-1 + 2*0.7,1,-1 + 2*0.7,-1,stroke="dasharray:5 5")
c.close()

Linear Gradient の与え方は
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#Gradients
を参考にした。

30% と 70% の意味をはっきりさせるために、参考のために補助線を引いてある。

このプログラムに現れる svgout メソッドは、このライブラリのもっとも低レベルのメソッドで、これを使えば、SVG に関する殆どあらゆる事ができる。従ってライブラリを直接弄らないで、ちょっとした実験を行うのに重宝する。Linear Gradient のメソッドは、ライブラリの内部に持つ価値は無いであろう。

Radial Gradient

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

#encoding: utf-8
import svg
c = svg.Canvas(0,0,400,200,map=(-1.5,1.5,1.5,-1.5))
d = c.define()
d.svgout("radialGradient",'id="MyGradient"' ,
"""<stop offset="20%" stop-color="red" />
<stop offset="50%" stop-color="blue" />
<stop offset="80%" stop-color="red" />"""
)
d.end()

c.rect(-1,-1,1,1,stroke="black",fill="url(#MyGradient)")
c.close()

radialGradient には、cx,cy,r,fx,fy を指定できるのであるが、僕はまだ使い方を良く知らない。