SVG 渐層

SVGグラデーションは、一つの色から別の色への滑らかな移行を定義できます。SVGでは、線形グラデーションと放射状グラデーションの2種類のグラデーションがあります。

SVGグラデーションは、形状に不均一な方法で色を塗り分ける方法です。このように、形状のフィルリングやパスラインは、一つの色から別の色に変わることができます。特定の種類のグラフィックでは、非常に見栄えが良くなります。

グラデーション例

グラデーションを形状のフィルリングとパスラインに適用する外観です：

第1つの矩形は常に同じパスラインの色を持ちますが、グラデーションフィルリングの色（薄から濃い緑色）があります。
　 　第2つの矩形はパスラインとフィルリングの色にグラデーションを適用しています。
　 　第3つの矩形はパスラインにグラデーションを適用していますが、フィルリングはありません。
　 　第4つの矩形はグラデーションをフィルリングに適用していますが、パスラインはありません。

グラデーションには二種類あります：

1. 線形グラデーション

2. 径向の拡大

以下のセクションでは、これらの二つの側面について説明します。

線形グラデーション

線形グラデーションは、一つの色からもう一つの色への線形で均一に変化します。本文の冒頭で、シンプルな線形グラデーションの例をいくつか見ました。

色は垂直、水平、または定義したベクトルに沿って変化できます。また、形状の一部のみをグラデーションで塗りつぶすこともできます。さらに説明する前に、以下の視覚的な例があります：

最初の矩形は垂直グラデーションを使用しています。第二の矩形は水平グラデーションを使用しています。第三の矩形は右下方向に暗くなる斜線グラデーションを使用しています。第四の矩形は右半分のみをグラデーションで塗りつぶしています。SVGの線形グラデーションを使用すると、これらすべてが可能です。

線形グラデーションは以下のように使用されます。<linearGradient>要素で定義されています。これは以下の例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

ご覧の通り、<linearGradient>-element内にネストされています。<defs>-element内に定義されます。<defs>-element内にグラデーション定義は常にネストして指定されます。例えば、線形グラデーションは以下のようにCSS属性（(fill:url(#myLinearGradient1))）内 <rect>のstylestyle属性内の-element参照

この<linearGradient>-要素に2つのネストされた<stop>-elementsは<linearGradient>-elementsのspreadMethodelementsはグラデーションが適用される前におよび後に何を制御します（方向と<stop>-属性）の

これは<linearGradient>-elementsはグラデーションで使用する色、形状の色の開始と終了位置、およびグラデーションの不透明度を制御します。

これは<stop>グラデーションを適用する前に変換できます（例えば、回転）（詳細については、以下を参照してください：

これらの属性の説明を全て覚えるのは難しいです。これらの意味を説明するための画像を作成しました：

これは画像と一致する線形グラデーションの定義です：

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600"　stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099"　stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="500"　height="50"　rx="10"　ry="10"
　　　　　　　style="fill:url(#myLinearGradient1);　stroke:　#005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

最初の停止色は#00cc00，10％から矩形に入り始めます。なぜならspreadMethodが「垫」に設定され，最初の色も矩形に塗りつぶされますの前にの最初の停止色（0-10％）。

第1の停止色から10％の色が第2の停止色#006600，矩形の30％。

第2の終端色から30％から第3の終端色#cc0000（赤色），矩形の70％。

第3の停止色から70％から第4および最後の停止色#000099（青色），90％から90％から矩形の残り部分まで，最後の終端色（#000099）が矩形に塗りつぶされます，なぜならspreadMethod 　 　この<linearGradient>要素の属性が「pad」に設定されています。

径向の拡大

径向の拡大は、色が円形で而不是縦線で変化する拡大です。これは以下の例画像です：

ご覧の通り、色は円形で変化しています。最後の3つの（緑色）矩形は最も浅い緑の放射中心で変化しています。最初の緑色矩形は矩形中心から色が拡散しています。第二の矩形は矩形の上端中央を使用しています。第三の矩形は左上角を中心としています。

径向の拡大は以下のように使用されます<radialGradient>要素で定義されています。これは以下の例です：

<svg　width="512"　height="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600"　stop-opacity="1></stop>/radialgradient>/defs>
<rect　x="340"　y="10"　width="100"　height="100"　rx="10"　ry="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-width:　3;<//rect>
　　　</svg>

このSVGコードは、上記の例で表示されている第四つの矩形を実際に定義しています。以下のように<stop>線形拡大と同様に、要素を使用して色を定義します（詳細については、線形拡大を参照してください）。

これは<radialGradient> 　 　要素の属性の一覧：

放射状グラデーションの中心は色が拡散する円の中心です。放射状グラデーションを円として説明すると、cxとcyは円の中心を示します。

放射状グラデーションの焦点は色の放射の「角度」です。放射状グラデーションをランプとして考えると、焦点はランプから形状に当たる光の角度を決定します。50％、50％は上から直接です。5％、5％は左上から下方向を示します。グラデーションは光が形状に当たるように見えます。

グラデーションの中心と焦点を試す必要がある可能性があります。私はこれを簡単な例を作成するために行っていますと知っています。

グラデーション変換

を使用して、標準SVG変換機能でグラデーションを変換します。この方法は、グラデーションの中心と焦点を正しく設定する前に、グラデーションを試す必要がある場合があります。私はこれを簡単な例を作成するために行っていますと知っています。gradientTransform属性、どちらも以下の<linearGradient>および 　 　 <radialGradient>。これは例です：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

この例では、gradientTransform() 　の線形グラデーション、このグラデーションはグラデーションを回転45度。通常、グラデーションは上から下に色を階段状に配置しますが、今では回転して右上から左下に配置されます。

実行後の画像効果：