stroke-dasharray

Baseline 已廣泛支援

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

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

注意： 作為一個呈現屬性，stroke-dasharray 還有一個對應的 CSS 屬性：stroke-dasharray。當同時指定兩者時，CSS 屬性具有優先權。

你可以將此屬性與以下 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>