stroke-dasharray

stroke-dasharray 屬性是一個呈現屬性，用於定義用於繪製形狀輪廓的虛線和間隙模式。

注意：作為呈現屬性，stroke-dasharray 可用作 CSS 屬性。有關詳細資訊，請參閱 stroke-dasharray。

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

示例

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

html

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>

使用說明

值	`none` \| `<dasharray>`
預設值	`none`
可動畫	是

<dasharray>

一個由逗號和/或空格分隔的 <length> 和 <percentage> 列表，用於指定交替虛線和間隙的長度。

如果提供了一個奇數個值，則該值列表將被重複以產生偶數個值。因此，5,3,2 等效於 5,3,2,5,3,2。

規範

規範
可縮放向量圖形 (SVG) 2 # StrokeDashing

瀏覽器相容性

BCD 表僅在瀏覽器中載入