SVGグラデーション-線形
SVGグラデーション
グラデーションは、ある色から別の色へのスムーズな移行です。さらに、同じ要素に複数のカラートランジションを適用できます。
SVGには主に2つのタイプのグラデーションがあります。
- 線形
- 放射状の
SVG線形グラデーション-<linearGradient>
<linearGradient>要素は、線形グラデーションを定義するために使用されます。
<linearGradient>要素は、<defs>タグ内にネストする必要があります。<defs>タグは定義の略で、特別な要素（グラデーションなど）の定義が含まれています。
線形グラデーションは、水平、垂直、または角度のグラデーションとして定義できます。
- y1とy2が等しく、x1とx2が異なる場合、水平方向のグラデーションが作成されます
- x1とx2が等しく、y1とy2が異なる場合、垂直方向のグラデーションが作成されます
- x1とx2が異なり、y1とy2が異なる場合、角度グラデーションが作成されます
例1
黄色から赤への水平方向の線形グラデーションで楕円を定義します。
SVGコードは次のとおりです。
例
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" 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="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
コードの説明：
- <linearGradient>タグのid属性は、グラデーションの一意の名前を定義します
- <linearGradient>タグのx1、x2、y1、y2属性は、グラデーションの開始位置と終了位置を定義します
- グラデーションの色の範囲は、2つ以上の色で構成できます。各色は<stop>タグで指定されます。オフセット属性は、グラデーションカラーの開始位置と終了位置を定義するために使用されます
- fill属性は、楕円要素をグラデーションにリンクします
例2
黄色から赤への垂直線形グラデーションで楕円を定義します。
SVGコードは次のとおりです。
例
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
例3
黄色から赤への水平方向の線形グラデーションで楕円を定義し、楕円の内側にテキストを追加します。
SVGコードは次のとおりです。
例
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" 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="70" rx="85" ry="55"
fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
コードの説明：
- <text>要素はテキストを追加するために使用されます