stroke-dashoffset

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-dashoffset 是一种表现属性,它定义了虚线与路径起点之间的偏移量。

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

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

示例

html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 没有设置为虚线 -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- 没有设置偏移量 -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!-- 虚线正向偏移了 3 个单位 -->
  <line
    x1="0"
    y1="5"
    x2="30"
    y2="5"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="3" />

  <!-- 虚线反向偏移了 3 个单位 -->
  <line
    x1="0"
    y1="7"
    x2="30"
    y2="7"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="-3" />

  <!-- 虚线正向偏移了 1 个单位,最终渲染结果和上一个例子相同 -->
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="1" />

  <!-- 底下的红线突显了每行虚线的偏移量 -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgb(255 0 0 / 50%)" />
</svg>

使用说明

<percentage> | <length>
默认值 0
可动画化

偏移量的计算通常基于 pathLength,但如果使用 <percentage> 值,那么将根据当前视口的百分比进行计算。

规范

Specification
Scalable Vector Graphics (SVG) 2
# StrokeDashoffsetProperty

浏览器兼容性

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-dashoffset

Legend

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

Full support
Full support