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 2020年3月.
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 |