stroke-linecap
stroke-linecap 屬性是用於定義描邊（stroke）在描邊開放子路徑（open subpaths）末端形狀的表示屬性。
注意： 作為一個表示屬性，stroke-linecap 也有一個對應的 CSS 屬性：stroke-linecap。當兩者都被指定時，CSS 屬性具有更高的優先順序。
你可以將此屬性與以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the (default) "butt" value -->
<line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />
<!-- Effect of the "round" value -->
<line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />
<!-- Effect of the "square" value -->
<line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
用法說明
| 值 | butt | round | square |
|---|---|
| 預設值 | butt（平頭） |
| 可動畫的 | 離散 |
butt（平頭）
butt 值表示描邊在每個子路徑的兩個端點處不會延伸。對於零長度的子路徑，該路徑將完全不被渲染。
示例
html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "butt" value -->
<path d="M1,1 h4" stroke="black" stroke-linecap="butt" />
<!-- Effect of the "butt" value on a zero length path -->
<path d="M3,3 h0" stroke="black" stroke-linecap="butt" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
round
round 值表示在每個子路徑的末端，描邊將向外延伸一個半圓形，其直徑等於描邊寬度。對於零長度的子路徑，描邊由一個以子路徑點為中心的完整圓形組成。
示例
html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "round" value -->
<path d="M1,1 h4" stroke="black" stroke-linecap="round" />
<!-- Effect of the "round" value on a zero length path -->
<path d="M3,3 h0" stroke="black" stroke-linecap="round" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
square
square 值表示在每個子路徑的末端，描邊將向外延伸一個矩形，該矩形的寬度等於描邊寬度的一半，高度等於描邊寬度。對於零長度的子路徑，描邊由一個以子路徑點為中心的、寬度等於描邊寬度的正方形組成。
示例
html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of the "square" value -->
<path d="M1,1 h4" stroke="black" stroke-linecap="square" />
<!-- Effect of the "square" value on a zero length path -->
<path d="M3,3 h0" stroke="black" stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # 線帽 |
瀏覽器相容性
載入中…
另見
- CSS
stroke-linecap屬性