SVGグラデーション学習の——SVG線形グラデーション
SVGランプはラベルで定義する必要があります.
SVGグラデーション
グラデーションは、ある色から別の色へのスムーズな遷移です.また、複数の色の遷移を同じ要素に適用することができます.
SVGには、2つの主要なグラデーションタイプがあります.リニアグラデーション 放射性グラデーション
せんけいランプ
SVGの線形グラデーションを定義するために使用できます.
ラベルはの内部にネストする必要があります.ラベルはdefinitionsの略で、グラデーションなどの特殊な要素を定義できます.
直線グラデーションは、水平、垂直、または角のグラデーションとして定義できます. y 1とy 2が等しいとき、x 1とx 2が異なるとき、水平ランプ を作成することができる. x 1とx 2が等しいとき、y 1とy 2が異なるとき、垂直ランプ を作成することができる. x 1とx 2が異なる場合、y 1とy 2が異なる場合、角形グラデーション を作成することができる.
次のコードをメモ帳にコピーし、ファイルを「linear 1.svg」に保存してください.このファイルをWebディレクトリに挿入します.
コードの説明:ラベルのidプロパティは、ランプに一意の名前 を定義できます. fill:url(#orange_red)プロパティellipse要素をこのグラデーション にリンクラベルのx 1、x 2、y 1、y 2属性は、グラデーションの開始位置および終了位置 を定義することができる.グラデーションの色範囲は、2つ以上の色から構成され得る.各色は1つのラベルで規定されています.offsetプロパティを使用して、グラデーションの開始位置と終了位置を定義します.
別の例:
SVGグラデーション
グラデーションは、ある色から別の色へのスムーズな遷移です.また、複数の色の遷移を同じ要素に適用することができます.
SVGには、2つの主要なグラデーションタイプがあります.
せんけいランプ
直線グラデーションは、水平、垂直、または角のグラデーションとして定義できます.
次のコードをメモ帳にコピーし、ファイルを「linear 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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>