SVGについて – グラデーションについて(その3)
放射型グラデーション
放射型グラデーションはradialGradient要素で定義されています。
<radialGradient id="radial_gradient1" > <stop offset="0%" stop-color="#333"/> <stop offset="100%" stop-color="#fff"/> </radialGradient>
全体は下記です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id = "radial_gradient1"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#radial_gradient1)"
/>
</svg>
</body>
</html>
画面にアクセスすると、放射状のグラデーションの円が表示されます。
上記のサンプルはrect(矩形)に対してのグラデーション指定です。
次にcircleのグラデーションを試してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id = "radial_gradient2"
cx = "0.5"
cy = "0.5"
r = "0.5"
fx = "0.7"
fy = "0.3"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#radial_gradient2)"
/>
</svg>
</body>
</html>
画面にアクセスすると、fxとfyで指定した位置が焦点とされ、やや右上の座標に放射状にグラデーションがかかる描画になります。
「radialGradient」に設定した各パラメータは、次の意味になります。
cx グラデーションの中心点のX座標 cy グラデーションの中心点のY座標 r グラデーションの半径 fx グラデーションの焦点のX軸方向の値 fy グラデーションの焦点のY軸方向の値
放射型グラデーションのspreadMethodについて
前回のサンプルをもとに、放射型グラデーションのspreadMethod属性について、試してみます。
spreadMethod属性は、グラデーションが終了した後に塗りつぶされていない領域をどう出力するかを制御します。
属性の値は「pad」「reflect」「repeat」があります。
属性値：padの場合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id = "radial_gradient2"
cx = "0.5"
cy = "0.5"
r = "0.5"
fx = "0.7"
fy = "0.3"
spreadMethod = "pad"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#radial_gradient2)"
/>
</svg>
</body>
</html>
画面にアクセスすると、さきほどのサンプルと同様の出力になり、あまり違いはわかりません(これは各パラメータの値によります)
spreadMethod属性が「pad」の場合は、グラデーションが終了すると、最終的なオフセットの値をもとに周囲を埋めて描画します。
属性値：reflectの場合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id = "radial_gradient2"
cx = "0.5"
cy = "0.5"
r = "0.5"
fx = "0.7"
fy = "0.3"
spreadMethod = "reflect"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#radial_gradient2)"
/>
</svg>
</body>
</html>
画面にアクセスすると、spreadMethod属性が「reflect」なので、グラデーションが継続されて描画されますが、グラデーションの終わりから逆に反射した形で描画していることがわかります。
属性値：repeatの場合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<radialGradient
id = "radial_gradient2"
cx = "0.5"
cy = "0.5"
r = "0.5"
fx = "0.7"
fy = "0.3"
spreadMethod = "repeat"
>
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#fff"/>
</radialGradient>
</defs>
<rect
x = "0"
y = "0"
width = "150"
height = "150"
fill = "url(#radial_gradient2)"
/>
</svg>
</body>
</html>
画面にアクセスすると、spreadMethod属性が「repeat」なので、グラデーションが最初の値から改めてグラデーションが開始されて描画されます。