SVGについて – グラデーションについて
線形グラデーション
図形の着色をグラデーション化します。
まずはシンプルなサンプルコードを用意しました。
<!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 offset="100%" stop-color="#ffffff" />
</linearGradient>
<rect
x = "0"
y = "0"
stroke = "#cccccc"
stroke-width = "1"
width = "150"
height = "150"
fill = "url(#grad1)"
/>
</svg>
</body>
</html>
画面にアクセスすると、縦150、横150の正方形が表示され、
内部の背景色は、黒(#000000)から白(#ffffff)へグラデーションで着色されます。
グラデーションの描画について、次回以降の投稿で詳細を調べていきます。