SVGグラデーション - リニア
SVGグラデーション
グラデーションカラーに1から別の色へのスムーズな移行です。 また、遷移が同じ要素に複数の色に適用することができます。
SVGグラデーションの2つの主要なタイプがあります。
- リニア
- ラジアル
SVGの線形グラデーション - <てLinearGradient>
<てLinearGradient>要素は、線形勾配を定義するために使用されます。
<てLinearGradient>タグは、<DEFS>インテリア内にネストする必要があります。 <DEFS>タグは、このようなグラデーションのように定義することができる特別な要素として頭字語の定義、です。
線形勾配は、水平、垂直または角度グラデーションのように定義することができます。
- Y 1およびY 2は同じではなく、X 1およびX 2の両方である場合、水平勾配を作り出します
- X1とX2等しく、Y 1及びY 2が同じでないときは、垂直方向のグラデーションを作成することができます
- x1とx2が異なっており、Y 1及びY 2が同じでないときは、グラデーションの角度を作成することができます
例1
これは、黄色から赤色の楕円形の水平方向の直線勾配を定義します。
ここではSVGのコードは次のとおりです。
例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
<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>
»をお試しください
オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。
コード解析：
- id属性<てLinearGradient>タグには、グラデーション定義のためのユニークな名前にすることができます
- <てLinearGradient>タグX1、X2、Y1、Y2属性勾配の開始と終了を定義します
- 2色以上によりグラデーション色の範囲。 <停止>タグによって各色を指定します。 勾配の開始および終了位置を定義するために使用されるオフセット。
- 楕円のグラデーションにリンクするプロパティ要素を埋めます
例2
黄色から赤色の楕円形に垂直な直線勾配を定義します。
ここではSVGのコードは次のとおりです。
例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" 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(#grad1)" />
</svg>
<defs>
<linearGradient id="grad1" 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(#grad1)" />
</svg>
»をお試しください
オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。
例3
楕円の定義、テキスト内の黄色から赤色への水平方向の直線勾配とは、楕円を追加します。
ここではSVGのコードは次のとおりです。
例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
<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)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
»をお試しください
オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。
コード解析：
- <テキスト>要素は、テキストを追加するために使用されます