プロパティと値(塗り)

さて、ここまでSVGファイルを構成するさまざまなエレメントについて定義してきましたが、ここではさらに、特定のプロパティと値の定義についてご説明しましょう。

fill

例:

<path style="fill:white">
値:none, current-color, <color>

"fill"プロパティは、エレメントに塗りがあるか否かを決定します。塗りがある場合は、さらに色も決定します。"current-color"、SVGを含むXMLファイルと同様に、親ドキュメントで指定された色値を返します。

fillrule

例:

<path style="fillrule:nonzero">
値:evenodd, nonzero, inherit

"fillrule"プロパティは、自分自身が交差するパスか複合パス(たとえばドーナツ)が非隣接領域だけか、あるいはすべての領域を塗りつぶすか否かを決定します。以下に示したのは、"evenodd" と"nonzero" の2つのfillrule例です。

"継承(inherit)" とは、エレメントの値が、それを囲むエレメント(またはグループ)の値と同じであることを意味します。

fill-opacity

例:

<path style="fill-opacity:0.25">
値:0から1の間のいずれかの値

"fill-opacity"プロパティは、エレメントが不透明か透明か(値が1なら完全に不透明で、0なら完全に透明)を指定します。また、"stroke-opacity"と"opacity"という追加の不透明度プロパティもあります。"fill-opacity"は、エレメントの塗りに、"stroke-opacity"は線に、"opacity"はエレメント全体の不透明度に関するものです。

以下のボックスの中に不透明度(0から1の間)の値をいろいろ入力して[Set]ボタンをクリックし、"星形"エレメントでどんな効果が起きるか見てみましょう。

stroke-opacity:   
fill-opacity:   
opacity:   

JavaScriptのソースを表示する

次のレッスン:線

Copyright ©2000 Adobe Systems Incorporated. All rights reserved.
Terms of Use
Online Privacy Policy