Stroke Properties

styleで線の特性を指定する。style外に直接指定することも出来る。

書き方

style="stroke:線の色"

style="stroke-width:線の幅"

style="stroke-linecap:線の末端の形状"

style="stroke-linejoin:線の接続点の形状"

style="stroke-miterlimit:斜め継ぎの膨らみ"

style="stroke-dasharray:点線の形状"

style="stroke-dashoffset:点線の開始位置"

style="stroke-opacity:線の透明度"

stroke="線の色"

stroke-width="線の幅"

stroke-linecap="線の末端の形状"

stroke-linejoin="線の接続点の形状"

stroke-miterlimit="斜め継ぎの膨らみ"

stroke-dasharray="点線の形状"

stroke-dashoffset="点線の開始位置"

stroke-opacity="線の透明度"

stroke:線の色

線の色を指定する。noneを指定した場合、透明。本特性を指定しない場合、noneとなる。

stroke-width:線の幅

線の幅を指定する。本特性を指定しない場合、1となる。

stroke-linecap:線の末端の形状

線の末端の形状を指定する。次の３種類から選択する。

butt：末端で止める。
round：末端を丸くする。指定した座標より外に膨らむ。
square：末端を四角くする。指定した座標より外に膨らむ。

stroke-linejoin:線の接続点の形状

線の接続点（継ぎ目）の形状を指定する。次の３種類から選択する。

miter：斜め継ぎ。指定した座標より外に膨らむ。
round：継ぎ目を丸くする。指定した座標より外に膨らむ。
bevel：末端で止める。

stroke-miterlimit:斜め継ぎの膨らみ

上記、斜め継ぎの膨らみを指定する？

stroke-dasharray:点線の形状

点線の腺と隙間それぞれの長さを指定する。

stroke-dashoffset:点線の開始位置

上記、点線の形状の開始位置を指定する。

stroke-opacity:線の透明度

線の透明度を指定する。1以下の値を指定する。1の場合、不透明となる。

使用例

線の色と太さ

<path d="M 30 40 L 80 60 L 30 80" style="fill:none; stroke:black; stroke-width:1" />

<path d="M 80 40 L 130 60 L 80 80" style="fill:none; stroke:blue; stroke-width:4" />

<path d="M 130 40 L 180 60 L 130 80" style="fill:none; stroke:red; stroke-width:8" />

線の末端の形状

各形状の違いを明確に示すため、各太線の中央を示す白線を加えている。

<path d="M 30 40 L 80 60 L 30 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linecap:butt" />

<path d="M 80 40 L 130 60 L 80 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linecap:round" />

<path d="M 130 40 L 180 60 L 130 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linecap:square" />

<path d="M 30 40 L 80 60 L 30 80" style="fill:none; stroke:white; stroke-width:1" />

<path d="M 80 40 L 130 60 L 80 80" style="fill:none; stroke:white; stroke-width:1" />

<path d="M 130 40 L 180 60 L 130 80" style="fill:none; stroke:white; stroke-width:1" />

線の接続点の形状

各形状の違いを明確に示すため、各太線の中央を示す白線を加えている。

<path d="M 30 40 L 80 60 L 30 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linejoin:miter" />

<path d="M 80 40 L 130 60 L 80 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linejoin:round" />

<path d="M 130 40 L 180 60 L 130 80" style="fill:none; stroke:blue; stroke-width:10; stroke-linejoin:bevel" />

<path d="M 30 40 L 80 60 L 30 80" style="fill:none; stroke:white; stroke-width:1" />

<path d="M 80 40 L 130 60 L 80 80" style="fill:none; stroke:white; stroke-width:1" />

<path d="M 130 40 L 180 60 L 130 80" style="fill:none; stroke:white; stroke-width:1" />

線の接続点の形状miterの先端の処理

AdobeSVGviewer3betaでは、細かな制御が出来ないようだ。

<path d="M 10 10 L 130 20 L 10 30" style="fill:none; stroke:blue; stroke-width:1" />

<path d="M 10 30 L 130 40 L 10 50" style="fill:none; stroke:blue; stroke-width:10; stroke-miterlimit:5" />

<path d="M 10 50 L 130 60 L 10 70" style="fill:none; stroke:blue; stroke-width:10; stroke-miterlimit:10" />

<path d="M 10 70 L 130 80 L 10 90" style="fill:none; stroke:blue; stroke-width:10; stroke-miterlimit:15" />

<path d="M 10 90 L 130 100 L 10 110" style="fill:none; stroke:blue; stroke-width:10; stroke-miterlimit:20" />

点線

<path d="M 30 20 L 170 20" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:5" />

<path d="M 30 50 L 170 50" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:5 2" />

<path d="M 30 80 L 170 80" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:5 2 10" />

<path d="M 30 110 L 170 110" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:5 2 10 4" />

<path d="M 30 20 L 170 20" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:20 2; stroke-dashoffset:0" />

<path d="M 30 50 L 170 50" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:20 2; stroke-dashoffset:5" />

<path d="M 30 80 L 170 80" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:20 2; stroke-dashoffset:10" />

<path d="M 30 110 L 170 110" style="fill:none; stroke:blue; stroke-width:10; stroke-dasharray:20 2; stroke-dashoffset:15" />

透明度

<path d="M 50 20 L 50 100" style="fill:none; stroke:blue; stroke-width:30; stroke-opacity:1" />

<path d="M 100 20 L 100 100" style="fill:none; stroke:blue; stroke-width:30; stroke-opacity:0.6" />

<path d="M 150 20 L 150 100" style="fill:none; stroke:blue; stroke-width:30; stroke-opacity:0.2" />

<path d="M 30 35 L 170 35" style="fill:none; stroke:red; stroke-width:20; stroke-opacity:1" />

<path d="M 30 60 L 170 60" style="fill:none; stroke:red; stroke-width:20; stroke-opacity:0.6" />

<path d="M 30 85 L 170 85" style="fill:none; stroke:red; stroke-width:20; stroke-opacity:0.2" />

関連ページ：SVG hand book 目次