グラフィックスの利用(6)

グラデーション

　色の濃淡を段階的に変化させたものを日本語ではグラデーションgradationというが，以下においてグラデーションを表現するために用いる英語はgradient（傾き）となっている．
　SVGグラフィックスで使えるグラデーションには線形グラデーションと円形グラデーションがある．

(1)は線形グラデーションの基本です．
<defs>
<linearGradient id="red_to_yellow">
<stop offset="0%" style="stop-color:red;" />
<stop offset="100%" style="stop-color:yellow;" />
</linearGradient>
</defs>
<rect x="1" y="1" width="18" height="8" style="fill:url(#red_to_yellow); stroke:black;stroke-width:0.1;" /> ①
<ellipse cx="10" cy="15" rx="8" ry="4" style="fill:url(#red_to_yellow); stroke:none;" /> ②

　まず，<defs>要素を使って，線形グラデーションのテンプレート（型版）を作ります．
　<linearGradient >は />で閉じずに>だけとし，</linearGradient>までを要素とします．

　ここで命名したid識別子を参照する側①②では，#を付けます．
　offsetは0%から100%まで，または0から1まで指定するのが基本です．これにより既定値として「左から右へ，0%のstop-colorから100%のstop-colorまで」のグラデ―ションが描かれます．

　stop-offsetとstop-colorの組は２つとは限られず，0%と100%の間を何色にも色分けすることができます．(2)は
<defs>
<linearGradient id="rainbow1">
<stop offset="0%" style="stop-color:red;" />
<stop offset="18%" style="stop-color:orange;" />
<stop offset="36%" style="stop-color:yellow;" />
<stop offset="54%" style="stop-color:green;" />
<stop offset="72%" style="stop-color:blue;" />
<stop offset="90%" style="stop-color:indigo;" />
<stop offset="100%" style="stop-color:violet;" />
</linearGradient>
</defs>
の形で7色に色分けしたものです．

　stop-offset，stop-colorに加えて不透明度opacityを不透明は1，透明は0の間で指定することができます．
左の図で，上の楕円はopacity指定なし(opacity:1;)，下の楕円はopacity指定をしたものです．
<defs>
<linearGradient id="green_to_yellow1">
<stop offset="0%" style="stop-color:green;" />
<stop offset="100%" style="stop-color:yellow;" />
</linearGradient>
<linearGradient id="green_to_yellow2">
<stop offset="0%" style="stop-color:green;stop-opacity:0.8;" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:0.1;" />
</linearGradient>
</defs>

　グラデーション・ベクトルの定義
　グラデーションは既定値では「左から右へ，0％から100%に向かって」変化しますが，この向きを変更することができます．(4)の左上の図は次のように書いたものです．
<defs>
<linearGradient id="down1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:red;stop-opacity:1;" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:1;" />
</linearGradient>
</defs>
<circle cx="5" cy="5" r="4" style="fill:url(#down1); stroke:none;" />
これにより↓向きのグラデーションになります．

(x1,y1)から(x2,y2)へ向かうベクトルがグラデーションの変化する向きを表すようになっています．
(4)の右上の図はx1="0%" y1="100%" x2="0%" y2="0%"（すなわち↑の向き），
左下の図はx1="100%" y1="0%" x2="0%" y2="0%"（すなわち←の向き），
右下の図はx1="0%" y1="0%" x2="100%" y2="0%"（すなわち→の向き）

(5) 斜め向きのグラデーションもあります．なお，座標で向きを考えるときに，デフォルトでｙは下が正であることに注意
左上の図は
x1="0" y1="0" x2="1" y2="1"（すなわち(0,0)→(1,1)向き： $\searrow$ ）
右上の図は
x1="0" y1="1" x2="1" y2="0"（すなわち(0,1)→(1,0)向き： $\nearrow$ ）
左下の図は
x1="1" y1="0" x2="0" y2="1"（すなわち(1,0)→(0,1)向き $\swarrow$ ）
右下の図は
x1="1" y1="1" x2="0" y2="0"（すなわち(1,1)→(0,0)向き $\nwarrow$ ）

(6)は円形グラデーションの例です．円形グラデーションを描くには<radialGradient>を使います．
(6)の左は，
<defs>
<radialGradient id="rad1">
<stop offset="0%" style="stop-color:white;stop-opacity:1;" />
<stop offset="100%" style="stop-color:black;stop-opacity:1;" />
</radialGradient>
</defs>
<circle cx="5" cy="5" r="5" style="stroke:none;fill:url(#rad1);"/>

(6)の右は，
<radialGradient id="rad2">
<stop offset="0%" style="stop-color:violet;stop-opacity:1;" />
<stop offset="25%" style="stop-color:indigo;stop-opacity:1;" />
<stop offset="40%" style="stop-color:blue;stop-opacity:1;" />
<stop offset="55%" style="stop-color:green;stop-opacity:1;" />
<stop offset="70%" style="stop-color:yellow;stop-opacity:1;" />
<stop offset="85%" style="stop-color:orange;stop-opacity:1;" />
<stop offset="100%" style="stop-color:red;stop-opacity:1;" />
</radialGradient>
</defs>
<circle cx="15" cy="5" r="5" style="stroke:none;fill:url(#rad2);"/>
と書いたものです．