SVGについて – グラデーションについて(その2)
線形グラデーションの透明度について
前回のサンプルに対して、パラメータを調整してみます。
下記の箇所で、グラデーションの開始位置と、色情報を指定していますが、
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0"
>
<stop offset="0%" stop-color="#000000" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
このパラメータの最初の色情報と、最後の色情報に対して、透明度を追加します。
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0"
>
<stop offset="0%" stop-color="#000000" stop-opacity="0.2" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.5" />
</linearGradient>
全体は下記です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0"
>
<stop offset="0%" stop-color="#000000" stop-opacity="0.2" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.5" />
</linearGradient>
<rect
x = "0"
y = "0"
stroke = "#cccccc"
stroke-width = "1"
width = "150"
height = "150"
fill = "url(#grad1)"
/>
</svg>
</body>
</html>
画面にアクセスすると、
stop-opacity
で、指定した値で色の透明度が決まります。
上記のサンプルの値を少し変えて比較してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0"
>
<stop offset="0%" stop-color="#000000" stop-opacity="0.7" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.8" />
</linearGradient>
<rect
x = "0"
y = "0"
stroke = "#cccccc"
stroke-width = "1"
width = "150"
height = "150"
fill = "url(#grad1)"
/>
</svg>
</body>
</html>
画面にアクセスすると、最初に書いたサンプルより、濃い配色でSVGが出力されることがわかります。
stop-opacityの値が1に近づくほど、透明度は元の色に近くなります。
線形グラデーションの方向指定
linearGradient 要素に対して、x1, x2, y1, y2 の指定で、グラデーションの方向を決定できます。
先程のサンプルの、下記の箇所
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "1"
y2 = "0"
>
を、以下に変更します。
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "0"
y2 = "1"
>
全体です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<linearGradient
id = "grad1"
x1 = "0"
y1 = "0"
x2 = "0"
y2 = "1"
>
<stop offset="0%" stop-color="#000000" stop-opacity="0.7" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.8" />
</linearGradient>
<rect
x = "0"
y = "0"
stroke = "#cccccc"
stroke-width = "1"
width = "150"
height = "150"
fill = "url(#grad1)"
/>
</svg>
</body>
</html>
画面にアクセスすると、グラデーションの方向が、上から下に変化していることがわかります。