SVG グラデーション - 放射性
SVG 放射状グラデーション - <radialGradient>
<radialGradient> 要素は放射状グラデーションを定義するために使用されます。
<radialGradient> タグは <defs> 内にネストする必要があります。 <defs> タグは定義の略称で、グラデーションなどの特別な要素を定義できます。
例 1
白から青の楕円への放射性勾配を定義します:
SVG コードは次のとおりです:
Example
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
例の実行»
「例の実行」ボタンをクリックして、オンライン例
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
コード分析:
<radialGradient>ラベルの id 属性は、グラデーションの一意の名前を定義できます
CX、CY、r 属性によって定義された最も外側の円と、定義された最も外側の円Fx と Fy による 内側の円
グラデーション色の範囲は 2 つ以上の色で構成できます。各色は <stop> タグで指定します。 offset 属性は、グラデーションの開始と終了を定義するために使用されます。 fill 属性は、楕円要素をこのグラデーションにリンクします。オンライン インスタンスを表示するには
- Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
