SVGグラデーション - 放射性

前：SVGグラデーション-リニア

次へ：SVGの例

SVG放射性漸進 - <radialGradient>

<RadialGradient>要素は、半径方向の勾配を定義するために使用されます。

<RadialGradient>タグは、<DEFS>インテリア内にネストする必要があります。 <DEFS>タグは、このようなグラデーションのように定義することができる特別な要素として頭字語の定義、です。

例1

白から青の楕円形に放射状のグラデーションを定義します。

ここではSVGのコードは次のとおりです。

例

<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<DEFS>
<RadialGradientのid = "grad1" CX = "50％" CY = "50％" R = "50％"のfx = "50％" FY = "50％">
<停止= "0％"スタイル=オフセット "停止-色：RGB（255,255,255）を、
停止-不透明度：0 "/>
<停止= = "100％"スタイルオフセット」を停止-色：RGB（0,0,255）を、停止-不透明度：1 "/>
</ RadialGradient>
</ DEFS>
<楕円は、CX = "200" CY = "70" RX = "85" RY = "55" =埋める」のURL（＃をgrad1） "/>
</ SVG>

»をお試しください

オペラユーザーの場合：ビューSVGファイル（プレビューソースSVGグラフィック上で右クリックします）。

コード解析：

id属性<radialGradient>タグには、グラデーション定義のためのユニークな名前にすることができます
CX、CY、およびr属性は、最も外側の円を定義し、FXおよびFyが最も内側の円を定義します
グラデーション色の範囲は、二つ以上の色で構成されてもよいです。各色は、<停止>タグを使用して指定されています。勾配の開始と終了を定義するために使用されるオフセット
楕円のグラデーションにリンクするプロパティ要素を埋めます

例2

白から青の楕円形別に定義された放射状の勾配：