stroke-miterlimit

Baseline 已廣泛支援

此功能已經成熟，並可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各瀏覽器中推出。

stroke-miterlimit 屬性是一個表示屬性，它定義了用於繪製斜接連線的斜接長度與stroke-width 之間的比率限制。當超過此限制時，連線將從斜接轉換為斜角。

注意： 作為一個表示屬性，stroke-miterlimit 也有一個對應的 CSS 屬性：stroke-miterlimit。當兩者都被指定時，CSS 屬性具有更高的優先順序。

你可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact of the default miter limit -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    id="p1"
    d="M1,9 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" />

  <!-- Impact of the smallest miter limit (1) -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="1"
    id="p2"
    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" />

  <!-- Impact of a large miter limit (8) -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="8"
    id="p3"
    d="M1,29 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" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <path
    stroke="pink"
    fill="none"
    stroke-width="0.05"
    d="M1, 9 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
      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
      M1,29 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" />
</svg>

當兩條線段以銳角相交，並且為 stroke-linejoin 指定了 miter 連線時，斜接可能會遠超繪製路徑的描邊寬度。stroke-miterlimit 比率用於定義何時超過限制，如果超過，則連線將從斜接轉換為斜角。

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

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

例如，miter 限制為 1.414 時，theta 小於 90 度時斜接將轉換為斜角；限制為 4.0 時，theta 小於約 29 度時轉換為斜角；限制為 10.0 時，theta 小於約 11.5 度時轉換為斜角。

使用語境

值	<number>
預設值	4
可動畫的	是

stroke-miterlimit 的值必須大於或等於 1。

規範

規範
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

瀏覽器相容性

另見

CSS stroke-miterlimit 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年4月16日⁩，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題