1. Web
  2. CSS
  3. stroke-miterlimit

stroke-miterlimit

Baseline 已廣泛支援

該特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 4 月以來，它已在各大瀏覽器上可用。

stroke-miterlimit CSS 屬性定義了當 SVG 元素描邊路徑的拐角樣式為斜接（mitered join）時，斜接長度與 stroke-width 之比的限制。如果超出此屬性定義的限制，拐角將從 miter 轉換為 bevel（斜角），使拐角顯示為截斷狀。

此屬性適用於任何生成 SVG 拐角的形狀或文字內容元素（完整列表請參閱 stroke-miterlimit），但作為繼承屬性，它也可以應用於 <g> 等元素，並對其後代元素的描邊產生預期效果。如果存在，它將覆蓋元素的 stroke-miterlimit 屬性。

描述

當兩條線段以尖角相交，並且 stroke-linejoin 指定為 miter 連線，或者預設為該值時，斜接可能會遠遠超出路徑描邊的線寬。stroke-miterlimit 比率用於定義一個限制，超過此限制後，連線將從斜接轉換為斜角。

斜接長度（斜接外尖端與內拐角之間的距離）與 stroke-width 之比透過以下公式直接關聯到使用者空間中線段之間的角度（theta）：

stroke-miterlimit=miterLengthstroke-width=1sin(θ2)\text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}

例如，1.414 的斜接限制會將小於 90 度的 theta 值對應的斜接轉換為斜角，4.0 的限制會將小於約 29 度的 theta 值對應的斜接轉換為斜角，10.0 的限制會將小於約 11.5 度的 theta 值對應的斜接轉換為斜角。

語法

css
/* number values */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* Global values */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

值

<number>

任何大於或等於 1 的正實數；小於此值的無效。初始值為 4。

正式定義

初始值4
應用於svg 中的 <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline> 和 <rect> 元素
繼承性是
計算值同指定值
動畫型別按計算值型別

正式語法

stroke-miterlimit = 
  <number>

示例

不同的斜接限制

此示例演示了 stroke-miterlimit 屬性不同值的影響。

HTML

我們設定了五條多段路徑，所有路徑都使用寬度為一的黑色描邊，無填充。每條路徑都建立了一系列山峰符號，從左側（淺角）到右側（極端角）。

html
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

我們對這些路徑應用遞增的 stroke-miterlimit 值，使得對於第一條路徑，只有第一個（最左側）子路徑是斜接的；對於第二條路徑，前兩個子路徑是斜接的；依此類推，直到第五條路徑，所有五個子路徑都是斜接的。

css
path:nth-child(1) {
  stroke-miterlimit: 1.1;
}
path:nth-child(2) {
  stroke-miterlimit: 1.4;
}
path:nth-child(3) {
  stroke-miterlimit: 1.9;
}
path:nth-child(4) {
  stroke-miterlimit: 4.2;
}
path:nth-child(5) {
  stroke-miterlimit: 6.1;
}

規範

規範
CSS 填充與描邊模組 Level 3
# stroke-miterlimit

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.