stroke-dasharray

stroke-dasharray 属性是一个呈现属性,用于定义用于绘制形状轮廓的虚线和间隙模式。

注意:作为呈现属性,stroke-dasharray 可用作 CSS 属性。有关详细信息,请参阅 stroke-dasharray

您可以将此属性与以下 SVG 元素一起使用:

示例

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 表仅在浏览器中加载