stroke-dashoffset

<number> Non-standard

一组 SVG 单位，其大小由当前单位空间定义。如果给定的值不为 0，则会将起始点从虚线数组的开头移动到数组中的另一个点。因此，正值将看起来像将虚线间隙模式向后移动，而负值将看起来像将模式向前移动。

<length>

像素单位的处理方式与 SVG 单位相同（请参阅上面的 <number>），基于字体的长度（如 em）将根据元素的文本大小的 SVG 值进行计算；其他长度单位的效果可能因浏览器而异。任何值的偏移效果与 <number> 值的偏移效果相同（请参阅上面）。

<percentage>

百分比指的是当前 SVG 视窗的标准化对角线，其计算方式为$\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<高度>}}^2}}{\sqrt{2}}$，而不是到笔划路径的总长度。负值无效。

stroke-dashoffset = 
  <length-percentage>  |
  <number>             

<length-percentage> = 
  <length>      |
  <percentage>  

为了展示如何偏移虚线，我们首先设置五个相同的路径，所有路径都使用 SVG 属性 `<a href="/en-US/docs/Web/SVG/Attribute/stroke-dasharray">stroke-dasharray</a>` 设置为 20 个单位的虚线，后面跟着 3 个单位的间隙。（这也可用 CSS 属性 `<a href="/en-US/docs/Web/CSS/stroke-dasharray">stroke-dasharray</a>` 完成）。然后，这些路径通过 CSS 设置各自的虚线偏移量。

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#EEE" />
  <g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
    <path d="M 10,10 h 80" />
    <path d="M 10,15 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,25 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -5;
}
path:nth-of-type(3) {
  stroke-dashoffset: 5;
}
path:nth-of-type(4) {
  stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
  stroke-dashoffset: 5%;
}

按顺序

1. 五个路径中的第一个设置为零偏移量，这是默认行为。
2. 第二个路径设置为 `-5` 的偏移量，这将数组的起点移到零点之前的五个单位。视觉效果是虚线模式向前移动了五个单位；因此，我们在路径的开头看到虚线的最后两个单位，然后是一个三单位的间隙。
3. 第三条路径的偏移量为 `5`，这意味着虚线的起点在虚线模式的第五个单位处。视觉效果是将虚线模式向后移动五个单位；因此，我们在路径的开头看到虚线的最后十五个单位，后面跟着一个三单位的间隙。
4. 第四条路径的偏移量为 `5px`，其效果与 `5` 的值相同（见上文）。
5. 第五条也是最后一条路径的偏移量为 `5%`，这与前两个示例非常相似，但并不完全相同。百分比是根据 SVG 视窗的对角线尺寸计算的，因此可能会根据该视窗的大小和纵横比而有所不同。

• SVG `<a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>` 属性
• CSS `<a href="/en-US/docs/Web/CSS/stroke-dasharray">stroke-dasharray</a>` 属性
• CSS `<a href="/en-US/docs/Web/CSS/stroke">stroke</a>` 属性