SVG 放射性グラデーション

SVG グラデーションは <defs> タグ内で定義する必要があります。

放射状グラデーション

<radialGradient> は放射状グラデーションを定義します。

<radialGradient> タグは <defs> 内に埋め込まなければなりません。<defs> タグは definitions の略で、グラデーションなどの特別な要素を定義するために使用されます。

以下のコードをノート帳にコピーして、ファイルを「radial1.svg」として保存してください。このファイルをウェブディレクトリに配置してください：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100">
style="fill:url(#grey_blue)"/>
</svg>

コードの説明：

<radialGradient> タグの id 属性は、グラデーションにユニークな名前を指定できます。fill:url(#grey_blue) 属性は、ellipse 要素をこのグラデーションにリンクし、cx、cy、および r 属性は外周を定義し、fx および fy は内周を定義します グラデーションの色範囲は、2色またはそれ以上の色で構成されます。各色は <stop> タグで指定されます。offset 属性は、グラデーションの開始および終了位置を定義します。

例を表示

別の例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100">
style="fill:url(#grey_blue)"/>
</svg>

例を表示