stroke-dasharray

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

stroke-dasharray 表现属性定义了用于绘制形状轮廓的虚线段和间隙的排列形式。

备注: 作为一个表现属性,stroke-dasharray 可以用作 CSS 属性。

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

示例

html
<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- 没有虚线和间隙 -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- 虚线段和间隙长度相同 -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- 虚线段和间隙长度不同 -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- 具有奇数个不同长度的虚线段和间隙 -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- 具有偶数个不同长度的虚线段和间隙 -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- 以间隙开始的虚线 -->
  <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

规范

Specification
Scalable Vector Graphics (SVG) 2
# StrokeDashing

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-dasharray

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support