stop
2007-01-10 | 仕様
stop要素は、グラデーションの色の勾配を指定する際に使われます。
stop要素によって、グラデーション領域内の指定された位置の色が定義されます。
領域内の色は定義された色の間を連続的に変化します。
パラメータとして、グラデーション領域内の位置とその位置の色および不透明度を指定します。
グラデーション領域内の位置を指定する属性が、offsetです。
色を指定する属性が、stop-colorです。
不透明度を指定する属性が、stop-opacityです。
offset属性の値は、グラデーション領域内の位置を表す値です。
通常、0(直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心)から1(直線のグラデーションにおいてはgradient vectorの終点、放射状のグラデーションにおいてはグラデーションの最も外側の円の円周)までの値になります。
stop-color属性の値は、"currentColor"、<color>、もしくは"inherit"です。
currentColorは、現在のcolorプロパティの値を表します。
<color>は、sRGB色空間の色を表します。
stop-opacity属性の値は不透明度を表す値、もしくは"inherit"です。
不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。
0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。
例えば、
<linearGradient xml:id="gradient02">
<stop offset="0" stop-color="white"/>
<stop offset="1" stop-color="black"/>
</linearGradient">
のように書けば、白から黒へ連続的に変化する直線のグラデーションとなります。
グラデーションの効果を得るためには、linearGradient要素およびradialGradient要素は、子要素に最低2つのstop要素が必要です。
stop要素が1つもない場合は、参照した属性の値に"none"が指定されたものとして扱われます。
stop要素が1つの場合は、参照した属性の値にstop要素で指定された色が指定されたものとして扱われます。すなわち、単色となります。
例えば、
<linearGradient xml:id="gradient03">
<stop offset="0" stop-color="white"/>
</linearGradient">
のように書けば、白となります。
1つのlinearGradient要素およびradialGradient要素の子であるstop要素のoffset属性の値は、先に記述されたstop要素のoffset属性の値と同じか大きなものである必要があります。そうでない場合は、先に記述されたstop要素の最も大きなoffset属性の値と同じものとして扱われます。
例えば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.5" stop-color="black"/>
</linearGradient">
のように書けば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.6" stop-color="black"/>
</linearGradient">
と同じように扱われます。
2つのstop要素のoffset属性の値が同じ場合は、offset属性の位置で色が切り替わります。
例えば、
<linearGradient xml:id="gradient05">
<stop offset="0" stop-color="green"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.5" stop-color="red"/>
<stop offset="1" stop-color="red"/>
</linearGradient">
<path d="M0,50L100,50" stroke="url(#gradient05)"/>
のように書けば、path要素の図形の輪郭線は(0,50)から(50,50)までが緑、(50,50)から(100,50)までが赤になります。
offset属性は指定されない場合は"0"として扱われます。すなわち、直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心となります。
stop-color属性は指定されない場合は"black"として扱われます。すなわち、黒となります。
stop-opacity属性は指定されない場合は"1"として扱われます。すなわち、全く透過しません。
stop要素によって、グラデーション領域内の指定された位置の色が定義されます。
領域内の色は定義された色の間を連続的に変化します。
パラメータとして、グラデーション領域内の位置とその位置の色および不透明度を指定します。
グラデーション領域内の位置を指定する属性が、offsetです。
色を指定する属性が、stop-colorです。
不透明度を指定する属性が、stop-opacityです。
offset属性の値は、グラデーション領域内の位置を表す値です。
通常、0(直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心)から1(直線のグラデーションにおいてはgradient vectorの終点、放射状のグラデーションにおいてはグラデーションの最も外側の円の円周)までの値になります。
stop-color属性の値は、"currentColor"、<color>、もしくは"inherit"です。
currentColorは、現在のcolorプロパティの値を表します。
<color>は、sRGB色空間の色を表します。
stop-opacity属性の値は不透明度を表す値、もしくは"inherit"です。
不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。
0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。
例えば、
<linearGradient xml:id="gradient02">
<stop offset="0" stop-color="white"/>
<stop offset="1" stop-color="black"/>
</linearGradient">
のように書けば、白から黒へ連続的に変化する直線のグラデーションとなります。
グラデーションの効果を得るためには、linearGradient要素およびradialGradient要素は、子要素に最低2つのstop要素が必要です。
stop要素が1つもない場合は、参照した属性の値に"none"が指定されたものとして扱われます。
stop要素が1つの場合は、参照した属性の値にstop要素で指定された色が指定されたものとして扱われます。すなわち、単色となります。
例えば、
<linearGradient xml:id="gradient03">
<stop offset="0" stop-color="white"/>
</linearGradient">
のように書けば、白となります。
1つのlinearGradient要素およびradialGradient要素の子であるstop要素のoffset属性の値は、先に記述されたstop要素のoffset属性の値と同じか大きなものである必要があります。そうでない場合は、先に記述されたstop要素の最も大きなoffset属性の値と同じものとして扱われます。
例えば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.5" stop-color="black"/>
</linearGradient">
のように書けば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.6" stop-color="black"/>
</linearGradient">
と同じように扱われます。
2つのstop要素のoffset属性の値が同じ場合は、offset属性の位置で色が切り替わります。
例えば、
<linearGradient xml:id="gradient05">
<stop offset="0" stop-color="green"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.5" stop-color="red"/>
<stop offset="1" stop-color="red"/>
</linearGradient">
<path d="M0,50L100,50" stroke="url(#gradient05)"/>
のように書けば、path要素の図形の輪郭線は(0,50)から(50,50)までが緑、(50,50)から(100,50)までが赤になります。
offset属性は指定されない場合は"0"として扱われます。すなわち、直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心となります。
stop-color属性は指定されない場合は"black"として扱われます。すなわち、黒となります。
stop-opacity属性は指定されない場合は"1"として扱われます。すなわち、全く透過しません。