SVG 線形グラデーション

SVGの徐々に変化する色は、<defs> タグ内で定義する必要があります。

SVG徐々に変化する色

徐々に変化する色は、1つの色から別の色への滑らかな移行です。また、同じ要素に複数の色の移行を適用することもできます。

SVGでは、主に2種類の徐々に変化する色があります：

  • 線形徐々に変化する色
  • 放射状徐々に変化する色

線形徐々に変化する色

<linearGradient> タグは、SVGの線形徐々に変化する色を定義するために使用されます。

<linearGradient> タグは、<defs> の内部に組み込まなければなりません。<defs> タグは definitions の略で、徐々に変化する色などの特別な要素を定義できます。

線形徐々に変化する色は、水平、垂直、または角形の徐々に変化する色として定義できます：

  • y1 と y2 が等しく、x1 と x2 が異なる場合、水平な徐々に変化する色を作成できます
  • x1 と x2 が等しく、y1 と y2 が異なる場合、垂直な徐々に変化する色を作成できます
  • x1 と x2 が異なり、y1 と y2 が異なる場合、角形の徐々に変化する色を作成できます

以下のコードをノートPadにコピーして、ファイルを「linear1.svg」として保存してください。このファイルをあなたのウェブディレクトリに配置してください：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

コードの説明：

  • <linearGradient> タグの id 属性は、徐々に変化する色にユニークな名前を定義できます
  • fill:url(#orange_red) 属性は、ellipse 要素をこの徐々に変化する色にリンクします
  • <linearGradient> タグの x1、x2、y1、y2 属性は、徐々に変化する色の開始と終了位置を定義できます
  • 色の範囲は、2色またはそれ以上の色で構成できます。各色は <stop> タグで指定されます。offset 属性は、徐々に変化する色の開始と終了位置を定義します。

例を見る（水平な徐々に変化する色）

別の例として：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

例を表示 （垂直グラデーション）