プロパティと値(線)

stroke

例:

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

"stroke"プロパティは、エレメントについて線の有無を決めます。線がある場合は、さらに色を決めます。"current-color"は、SVGを含むXMLファイルなどの親ドキュメントで指定された色値を返します。

stroke-width

例:

<path style="stroke-width:2">
値: <width>, inherit

"stroke-width"は、ユーザ指定単位の線幅をデフォルトで1とします。パーセント値でも指定することができます。この場合、SVGビューポートのパーセント値が値として適用されます。

stroke-linecap

例:

<path style="stroke-linecap:square">
値:butt, round, square, inherit

"stroke-linecap"プロパティは、オープンなパスの先端で使われる形状を指定します。"butt" がデフォルト値です。

stroke-linejoin

例:

<path style="stroke-linejoin:bevel">
値:miter, round, bevel, inherit

"stroke-linejoin"プロパティは、パスの角で使われる形状を指定します。"miter"がデフォルト値です。

stroke-miterlimit

例:

<path style="stroke-miterlimit:4">
値:<miterlimit>, inherit

"stroke-miterlimit"プロパティは、2つの線分が鋭角でぶつかった所でマイターをどのくらい延ばすかを指定します。値は1より大きい値であり、Illustratorの"線種:マイター結合"にある値に対応します。"8"がデフォルト値です。

stroke-dasharray

例:

<path style="stroke-dasharray:12 12">
値:<dasharray>, inherit

"stroke-dasharray"プロパティは、破線のための線分と間隔のパターンを指定します。ここでも、Illustratorの"線種:破線"の例が見られます。

以下の6つのボックスにお好きなstroke-dasharray値を入力して[Set]ボタンをクリックし、グリッドを変更してみてください。
(一部または全部のボックスを空のままにしておくこともできます。)

           

JavaScriptのソースを表示する

次のレッスン:グラデーション

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