stroke-linecapプロパティは、輪郭線の端の形を指定する際に使われます。
stroke-linecapプロパティによって、描かれる図形の輪郭線の端の形が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-linecapプロパティの値を指定する場合はstroke-linecap属性を利用します。
stroke-linecap属性の値は"butt"、"round"、"square"、もしくは"inherit"です。
"butt"の場合は、端点の座標を通る輪郭線と直角に交わる直線になります。輪郭線の端は輪郭線と直角になります。
"round"の場合は、端点の座標を中心として線の太さを直径とする円の内側を輪郭線の色で塗りつぶします。輪郭線の端は丸くなります。
"square"の場合は、端点の座標を中心として線の太さを一辺の長さとする矩形の内側を輪郭線の色で塗りつぶします。矩形の1組の辺は輪郭線の端に平行、もう1組の辺は垂直になります。輪郭線は見ためには線幅の分だけ長くなります。
例えば、
stroke-width="4" stroke-linecap="round"
のように書けば、stroke-linecap属性の付いた要素によって描かれる図形の輪郭線の端は半径2の半円の形になります。
stroke-linecap属性がない場合は"butt"として扱われます。すなわち、端は輪郭線と直角になります。
stroke-linecapプロパティによって、描かれる図形の輪郭線の端の形が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-linecapプロパティの値を指定する場合はstroke-linecap属性を利用します。
stroke-linecap属性の値は"butt"、"round"、"square"、もしくは"inherit"です。
"butt"の場合は、端点の座標を通る輪郭線と直角に交わる直線になります。輪郭線の端は輪郭線と直角になります。
"round"の場合は、端点の座標を中心として線の太さを直径とする円の内側を輪郭線の色で塗りつぶします。輪郭線の端は丸くなります。
"square"の場合は、端点の座標を中心として線の太さを一辺の長さとする矩形の内側を輪郭線の色で塗りつぶします。矩形の1組の辺は輪郭線の端に平行、もう1組の辺は垂直になります。輪郭線は見ためには線幅の分だけ長くなります。
例えば、
stroke-width="4" stroke-linecap="round"
のように書けば、stroke-linecap属性の付いた要素によって描かれる図形の輪郭線の端は半径2の半円の形になります。
stroke-linecap属性がない場合は"butt"として扱われます。すなわち、端は輪郭線と直角になります。