SVGランプ学習の――SVG放射性ランプ

2516 ワード

httml 5 svg

SVGランプはラベルで定義する必要があります.

ほうしゃせいグラデーション

放射性グラデーションを定義します.

ラベルはにネストする必要があります.ラベルはdefinitionsの略で、グラデーションなどの特殊な要素を定義できます.

次のコードをメモ帳にコピーし、ファイルを「radial 1.svg」に保存してください.このファイルをWebディレクトリに挿入します.

<?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>

コードの説明:
ラベルのidプロパティは、ランプに一意の名前を定義できます.fill:url(#grey_blue)プロパティはellipse要素をこのランプにリンクし、cx、cy、rプロパティは外輪を定義し、fxおよびfy定義内輪ランプの色範囲は2つ以上の色で構成できます.各色は1つのラベルで規定されています.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>

Emmet構文(一)

Linux共通コマンド(以降)