stroke-linejoin
stroke-linejoin CSS 屬性定義了 SVG 元素描邊路徑的拐角形狀。如果存在，它將覆蓋元素的 stroke-linejoin 屬性。
此屬性適用於任何 SVG 生成拐角形狀或文字內容元素（參見 stroke-linejoin 以獲取完整列表），但作為繼承屬性，它可以應用於諸如 <g> 等元素，並且仍然對其後代元素產生預期效果
語法
css
/* keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;
/* Global values */
stroke-linejoin: inherit;
stroke-linejoin: initial;
stroke-linejoin: revert;
stroke-linejoin: revert-layer;
stroke-linejoin: unset;
值
bevel-
表示使用斜角連線路徑段。斜角是透過截斷拐角形成的，截斷線垂直於一條平分子路徑角度差異的線，即它們在連線點相遇的位置。
miter-
表示使用尖角連線路徑段。拐角是透過沿著路徑段切線方向延伸描邊的外邊緣直到它們相交而形成的。這是預設值。
round-
表示使用圓角連線路徑段。這是透過按照
bevel方式裁剪連線點，然後附加一個填充的切線圓弧來實現的，從而使拐角變圓。
定義了以下值，但任何瀏覽器都不支援
arcs-
（不支援。） 表示使用 弧形角 來連線路徑段。弧形形狀是透過在連線點處用與連線點處外邊緣具有相同曲率的弧線來延伸描邊的外邊緣而形成的。
crop-
（不支援。） 表示拐角應延伸超過連線點，延伸量最少足以形成凸角。這在功能上等同於
miter（見上文），stroke-miterlimit的值為1。 fallback-
（不支援；有風險。） 當
stroke-miterlimit值超出時，行為與crop bevel相同。
正式定義
正式語法
stroke-linejoin =
[ crop | arcs | miter ] ||
[ bevel | round | fallback ]
示例
線連線樣式
此示例演示了 stroke-linejoin 當前支援的三個關鍵字值。
HTML
我們設定了四個相同的路徑，所有路徑都具有一個寬度為一的黑色描邊且無填充。
html
<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path d="M2,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
</g>
</svg>
CSS
對這四個路徑中的每一個應用了支援的線連線值。第一個是斜角，第二個是圓角，第三個是尖角，第四個也是尖角，但 stroke-miterlimit 的值為 2，這迫使拐角變為斜角而不是尖角。
css
path:nth-child(1) {
stroke-linejoin: bevel;
}
path:nth-child(2) {
stroke-linejoin: round;
}
path:nth-child(3) {
stroke-linejoin: miter;
}
path:nth-child(4) {
stroke-linejoin: miter;
stroke-miterlimit: 2;
}
結果
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # stroke-linejoin |
瀏覽器相容性
載入中…