SVGグラデーション
勾配は、別の色からの円滑な移行です。 さらに、いくつかの色の遷移が同じ要素に適用することができます。
SVGでグラデーションの2つの主要なタイプがあります。
- リニア
- ラジアル
SVGリニアグラデーション - <てLinearGradient>
<linearGradient>要素は、線形勾配を定義するために使用されます。
<linearGradient>要素は、内にネストされている必要があり<defs>タグ。 <defs>タグが定義については短く、特別な要素の定義が含まれている(such as gradients) 。
線形勾配は、水平、垂直または角度の勾配として定義することができます。
- Y 1およびY 2は同じであり、X 1およびX 2が異なる場合、水平勾配が作成されます
- X1及びX2が等しく、Y 1及びY 2が異なる場合、垂直勾配が作成されます
- x1とx2は異なり、Y 1およびY 2が異なる場合、角度勾配が作成されます。
例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>
»それを自分で試してみてください Code explanation:
- idの属性<linearGradient>タグは、勾配の一意の名前を定義します
- X1、X2、Y1、Y2の属性<linearGradient>タグは、グラデーションの開始と終了位置を定義します
- グラデーションの色の範囲は、二色以上で構成することができます。 それぞれの色がで指定されている<stop>タグ。 offsetグラデーション色の開始および終了場所属性を定義するために使用され
- 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,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(#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>
»それを自分で試してみてください Code explanation:
- <text>要素には、テキストを追加するために使用されます