SVG グラデーション - 線形

SVG グラデーション

グラデーションは、ある色から別な色へのスムーズな遷移です。 さらに、いくつかの色の遷移を、同じ要素に適用することができます。

SVG のグラデーションには、2 つの主要なタイプがあります:

• 線形
• 円形

SVG 線形グラデーション - <linearGradient>

<linearGradient> 要素は、線形グラデーションを定義するために使用します。

<linearGradient> 要素は、<defs> タグ内にネストされている必要があります。 <defs> タグは、definitions の略語であり、特別な要素（例えば、グラデーションなど）の定義が含まれます。

線形グラデーションは、水平、垂直方向または傾斜角により定義することができます:

• 水平グラデーションは、y1 と y2 が等しく、x1 と x2 が異なる場合に作成されます
• 垂直グラデーションは、x1 と x2 が等しく、y1 と y2 が異なる場合に作成されます
• 傾斜グラデーションは、x1 と x2 が異なり、y1 と y2 が異なる場合に作成されます

例 1

黄色から赤への水平方向の線形グラデーションを持つ楕円を定義します：

SVG コードは次の通りです：

コードの説明：

• <linearGradient> タグの id 属性は、グラデーションにユニークな名前を定義します
• <linearGradient> タグの x1, x2, y1,y2 属性は、グラデーションの開始位置と終了位置を定義します
• グラデーションの色の範囲は、2 色以上で構成することができます。各色は <stop> タグで指定します。 offset 属性は、グラデーションの色がどこで始まりどこで終るのかを定義するのに使用します
• fill 属性は、ellipse 要素をグラデーションにリンクします

例 2

黄色から赤への垂直方向の線形グラデーションを持つ楕円を定義します：

SVG コードは次の通りです：

例 3

黄色から赤へ水平方向の線形グラデーションを持つ楕円を定義し、楕円の中にテキストを追加します：

SVG コードは次の通りです：

コードの説明：

• <text> 要素は、テキストを追加するために使用します