右から左へ、あるいは上から下へなどのように一定の方向に向かって変化するグラデーションを実現する線形グラデーションは
<linearGradient>要素を使って指定します。
最初に<defs>要素の中で<linearGradient>要素を使ってグラデーションを定義します。
このとき、変化してゆく特定の位置ごとに色や濃度などを<stop>要素として設定します。
次の例は、塗り潰し始め(offset="0%")は明るいブルー(stop-color="lightblue")にし、
塗り潰し終わり(offset="100%")は赤(stop-color="red")という値を設定します。
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="lightblue" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
そして、fill要素にこの定義のURLを指定します。
<!--- グラデーションで塗り潰す -->
<rect x="10" y="20" width="150" height="40" fill="url(#grad1)" />
次の表に示す属性があります。
属性 | 説明 |
---|---|
id | グラデーションのID |
x1 | 水平方向の始点のグラデーションの割合 |
y1 | 垂直方向の始点のグラデーションの割合 |
x2 | 水平方向の終点のグラデーションの割合 |
y2 | 垂直方向の終点のグラデーションの割合 |
次の例は、2種類の方法でグラデーションで塗り潰す例です。 最初の例は単純に左から右に変わるグラデーションで、2番目の例は中央が濃くなり左右が薄くなるグラデーションの例です。
<svg width="200" height="120" stroke="black" stroke-width="2px">
<!--- グラデーションの定義 -->
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="lightblue" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<!--- グラデーションで塗り潰す -->
<rect x="10" y="20" width="150" height="40" fill="url(#grad1)" />
<!--- グラデーションの定義 -->
<defs>
<linearGradient id="grad2">
<stop offset="0%" stop-color="lightgray" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="100%" stop-color="lightgray" />
</linearGradient>
</defs>
<!--- グラデーションで塗り潰す -->
<rect x="10" y="80" width="150" height="40" fill="url(#grad2)" />
</svg>
次のように表示されます。
左上から右下へ、あるいは左下から右上へなどのように斜めに変化するグラデーションを実現する線形グラデーションは、 <linearGradient>要素のx1、y1、x2、y2の各属性にグラデーションの割合を示す値を使って指定します。 この割合は、0%から100%または0.0~1.0の整数で指定します。
<defs>
<linearGradient id="grad1"
x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="lightblue" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
次の値を指定すると、対角線に沿ってグラデーションが変化します。
x1="0%" y1="0%" x2="100% y2="100%"
次の例は、対角線上をグラデーションで塗り潰す例です。
<svg width="300" height="200" stroke="black" stroke-width="2px">
<!--- グラデーションの定義 -->
<defs>
<linearGradient id="grad1a" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="lightblue" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
<linearGradient id="grad2a" xlink:href="#grad1"
x1="0%" y1="33%" x2="100%" y2="67%" />
</defs>
<!--- グラデーションで塗り潰す -->
<rect x="10" y="20" width="150" height="80" fill="url(#grad1a)" />
<!--- グラデーションで塗り潰す -->
<rect x="10" y="120" width="150" height="80" fill="url(#grad2a)" />
</svg>
次のように表示されます。