stroke-linecap
stroke-linecap CSS 屬性定義了 SVG 元素未閉合描邊的開放子路徑末端使用的形狀。如果存在，它將覆蓋元素的 stroke-linecap 屬性。
此屬性適用於任何可以具有未閉合描邊的 SVG 形狀和文字內容元素（有關完整列表，請參閱 stroke-linecap），但作為繼承屬性，它也可以應用於 <g> 等元素，並且仍然對後代元素的描邊產生預期效果。
語法
css
/* keyword values */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;
/* Global values */
stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;
值
正式定義
正式語法
stroke-linecap =
butt |
round |
square
示例
線帽
此示例演示了該屬性的三個關鍵字值。
HTML
我們首先設定一個淺灰色矩形。然後，在一個組中，定義了三條路徑，它們的長度與矩形的寬度完全相同，並且都從矩形的左邊緣開始。它們都被設定為具有七畫素寬的 dodgerblue 描邊。
html
<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 為每條路徑應用不同的線帽樣式。
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 線帽，這實際上意味著描邊精確地延伸到路徑的端點（起點和終點），不再延伸。第二條路徑具有 square 線帽，因此可見路徑延伸超出路徑的端點，使得路徑的總長度看起來是 87，因為路徑長度是 80，並且兩個方帽的寬度都是 3.5。第三條路徑具有 circle 帽，所以雖然它也看起來是 87 個單位長，但兩個帽是半圓形而不是方形。
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # stroke-linecap |
瀏覽器相容性
載入中…