stroke-dasharrayプロパティは、図形の輪郭線を破線で描く際に使われます。
stroke-dasharrayプロパティによって、描かれる図形の輪郭線を描く破線の形(線の長さと線と線の間隔)が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-dasharrayプロパティの値を指定する場合はstroke-dasharray属性を利用します。
stroke-dasharray属性の値は"none"、破線の形を表す値のリスト、もしくは"inherit"です。
破線の形を表す値のリストは、それぞれの値の間をカンマ(",")で区切ります。
値は先頭から2つずつ線の長さと線と線の間隔の長さのペアとして扱います。
例えば、
stroke-dasharray="5,3"
のように書けば、破線の形は長さ5の線と長さ3の間隔の繰り返しになります。
リストの値の数が奇数であった場合には、同じリストがもう1つ後ろにつながっているものとして扱います。
例えば、
stroke-dasharray="5,3,2"
のように書けば、
stroke-dasharray="5,3,2,5,3,2"
と同じように、長さ5の線、長さ3の間隔、長さ2の線、長さ5の間隔、長さ3の線、長さ2の間隔の繰り返しになります。
破線の形を表すリストに負の値が指定された場合は、stroke-dasharray属性が指定されなかったものとして扱われます。
また、リストの値の合計が0になる場合は"none"として扱われます。
stroke-dasharray属性がない場合は"none"として扱われます。"none"が指定された場合は、その図形の輪郭線は実線で描かれます。
破線を構成するそれぞれの線の端点は、stroke-linecapプロパティの値にしたがった形になります。
長さが0の場合も端点の処理が行われるため、stroke-linecapプロパティの値にしたがった形になります。
stroke-dasharrayプロパティによって、描かれる図形の輪郭線を描く破線の形(線の長さと線と線の間隔)が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-dasharrayプロパティの値を指定する場合はstroke-dasharray属性を利用します。
stroke-dasharray属性の値は"none"、破線の形を表す値のリスト、もしくは"inherit"です。
破線の形を表す値のリストは、それぞれの値の間をカンマ(",")で区切ります。
値は先頭から2つずつ線の長さと線と線の間隔の長さのペアとして扱います。
例えば、
stroke-dasharray="5,3"
のように書けば、破線の形は長さ5の線と長さ3の間隔の繰り返しになります。
リストの値の数が奇数であった場合には、同じリストがもう1つ後ろにつながっているものとして扱います。
例えば、
stroke-dasharray="5,3,2"
のように書けば、
stroke-dasharray="5,3,2,5,3,2"
と同じように、長さ5の線、長さ3の間隔、長さ2の線、長さ5の間隔、長さ3の線、長さ2の間隔の繰り返しになります。
破線の形を表すリストに負の値が指定された場合は、stroke-dasharray属性が指定されなかったものとして扱われます。
また、リストの値の合計が0になる場合は"none"として扱われます。
stroke-dasharray属性がない場合は"none"として扱われます。"none"が指定された場合は、その図形の輪郭線は実線で描かれます。
破線を構成するそれぞれの線の端点は、stroke-linecapプロパティの値にしたがった形になります。
長さが0の場合も端点の処理が行われるため、stroke-linecapプロパティの値にしたがった形になります。