stroke-linecap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
stroke-linecap は CSS のプロパティで、SVG 要素の閉じていないストロークの開いたサブパスの終端に使用される形状を定義します。指定された場合、要素の stroke-linecap 属性を上書きします。
このプロパティは、閉じていないストロークやテキストコンテンツ要素を持つ可能性のあるあらゆる SVG 図形（完全な一覧は stroke-linecap を参照）に適用されますが、継承プロパティであるため、<g> などの要素に適用された場合、子孫要素のストロークにも意図した効果が及びます。
構文
/* キーワード値 */ stroke-linecap: butt; stroke-linecap: round; stroke-linecap: square; /* グローバル値 */ stroke-linecap: inherit; stroke-linecap: initial; stroke-linecap: revert; stroke-linecap: revert-layer; stroke-linecap: unset; 値
公式定義
形式文法
stroke-linecap =
butt |
round |
square
例
線端形状
この例は、プロパティの 3 つのキーワード値を示しています。
HTML
まず薄い灰色の矩形を配置します。次に、グループ内で 3 つのパスを定義します。これらはすべて矩形の幅とまったく同じ長さで、矩形の左端から始まります。すべて dodgerblue のストローク（幅 7）に設定されています。
<svg viewBox="0 0 100 50" width="500" height="250"> <rect x="10" y="5" width="80" height="30" fill="#dddddd" /> <g stroke="dodgerblue" stroke-width="7"> <path d="M 10,10 h 80" /> <path d="M 10,20 h 80" /> <path d="M 10,30 h 80" /> </g> </svg> CSS
次に、CSS を介して各パスに異なる線端形状スタイルを適用します。
path:nth-of-type(1) { stroke-linecap: butt; } path:nth-of-type(2) { stroke-linecap: square; } path:nth-of-type(3) { stroke-linecap: round; } 結果
最初のパスは butt の線端形状を採用しています。これは基本的に、ストロークがパスの端点（始点と終点の両方）に正確に到達し、それ以上は伸びないことを意味します。 2 番目のパスは square の線端形状です。そのため可視パスはパスの端点を超えて延長され、パスの全長が 87 単位に見えるようになります。これはパス長が 80 単位で、2 つの角形端形状がそれぞれ 3.5 単位の幅を持つためです。3 番目のパスは circle の線端形状です。同様に全長が 87 単位に見えるものの、2 つの線端形状は角形ではなく半円形です。
仕様書
| Specification |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-linecap |