1. Web
  2. CSS
  3. stroke-dashoffset

stroke-dashoffset

Baseline 已广泛支持

该特性已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 4 月以来，它已在各大浏览器上可用。

stroke-dashoffset CSS 属性定义了 SVG 元素关联的虚线数组渲染起始点的偏移量。如果存在，它将覆盖元素的 stroke-dashoffset 属性。

此属性适用于任何 SVG 形状或文本内容元素（参见 stroke-dashoffset 获取完整列表），但作为继承属性，它也可以应用于 <g> 等元素，并仍然对后代元素的描边产生预期效果。

语法

css
/* Keyword */
stroke-dashoffset: none;

/* Length and percentage values */
stroke-dashoffset: 2;
stroke-dashoffset: 2px;
stroke-dashoffset: 2%;

/* Global values */
stroke-dashoffset: inherit;
stroke-dashoffset: initial;
stroke-dashoffset: revert;
stroke-dashoffset: revert-layer;
stroke-dashoffset: unset;

值

<number>

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

<length>

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

<percentage>

百分比指的是当前 SVG 视口归一化对角线，计算方法为<width>2+<height>22，而不是描边路径的总长度。负值无效。

正式定义

初始值0
应用于svg 中的 <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline> 和 <rect> 元素
继承性是
百分比指的是当前 SVG 视口应用的 viewBox 的归一化对角线测量值，如果未指定 viewBox，则指视口本身的测量值。
计算值一个绝对的 <length> 或 <percentage>，数字首先转换为绝对长度
动画类型按计算值类型

正式语法

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

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

示例

虚线偏移

为了演示虚线如何偏移，我们首先设置了五个相同的路径，所有这些路径都通过 SVG 属性 stroke-dasharray 给定一个由 20 个单位的虚线和 3 个单位的间隙组成的虚线数组。（这也可以通过 CSS 属性 stroke-dasharray 完成。）然后，这些路径通过 CSS 获得单独的虚线偏移。

html
<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
  <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>
css
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 视口的对角线测量值计算的，因此可能会根据视口的大小和宽高比而变化。

规范

规范
CSS 填充与描边模块 Level 3
# stroke-dashoffset

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.