SVG stroke-dashoffset 在 safari 上不起作用答案

【问题标题】：SVG stroke-dashoffset not working on safariSVG stroke-dashoffset 在 safari 上不起作用
【发布时间】：2023-03-27 18:11:01
【问题描述】：

即使我添加了 -webkit- 前缀，Stroke-dashoffset 也无法在 safari 上运行。请帮我。谢谢！....

这是我的示例代码....

#path1 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}
.path2 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}

@keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

【问题讨论】：

帮助我们帮助您。请提供MCVE。

标签： css svg safari

【解决方案1】：

Safari 不支持负的 stroke-dashoffset ......

【讨论】：

【解决方案2】：

如上所述，负值不适用于 stroke-dashoffset。如果您将值转换为正数，这应该可以（您也需要转换初始值）：

.path2 {
  stroke-dasharray: 1500;
}

@keyframes dash {
  from {
  stroke-dashoffset: 500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: 500;
  }
}

【讨论】：

【解决方案3】：

不是"Safari doesn't support negative `stroke-dashoffset"，根据接受的答案。 Safari 实际上遵循规范。 Chrome、Firefox 等违反规范，可能是因为他们意识到规范定义不明确。

这里是SVG spec's definition of stroke-dashoffset。需要注意的几点：

正的stroke-dashoffset 值不会使虚线向前移动，从路径的起点到路径的终点：它们向后移动。这是因为它被定义为“到路径开始的虚线图案的距离”，而不是您想象的“图案开始沿路径的距离”。
负stroke-dashoffset 值不会使虚线向后移动，确切地说。也就是说，从 > 0 跨越到

简而言之，dashoffset 的工作方式与您预期的完全不同。并且您应该尽可能避免使用负值以避免混淆。

解决方案

解决这个问题的常用方法是删除负号并反转动画，这通常（可能总是？）应该会产生预期的效果：

#path {
  stroke-dasharray: 500;
  animation: dash 2s ease reverse;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }
}

讨论✝

我认为这种混淆最终源于规范中这一行的歧义：

where s is the sum of the dash array values.

“破折号数组值”是指用户在属性中提供的值吗？或者它是否引用being processed 之后的值数组，奇数长度的数组被重复以产生偶数长度的数组（例如stroke-dasharray="10" 变为stroke-dasharray="10 10"）。 Safari 似乎将其解释为前者，Chrome 和 Firefox 将其解释为后者。

例如，对于stroke-dasharray="10"，规范说stroke-dashoffset="-1" 看起来与stroke-dashoffset="9" 相同。但在 Chrome 和 Firefox 中，它看起来与 stroke-dashoffset="19" 相同。但是，如果您设置 stroke-dasharray="10 10"，则规范的行为似乎与您希望的一样。

【讨论】：

SVG 1.1 规范不包含此文本。如果您觉得可以改进，请使用 w3c 并进一步更改规范。如果 Chrome 和 Firefox 同意，让 Safari 修复它们的实现可能是最简单的。
如果 Chrome 和 Firefox 改变了它们的实现并且有任何依赖它的内容，它就会中断。请与 w3c 一起解决这个问题，希望他们能够修复规范，并且 Safari 会更改以匹配 Chrome 和 Firefox。

【解决方案4】：

只需将stroke-dashoffset 设置为stroke-dasharray 的两倍值，我就能得到想要的结果

第一步：

第二步：

【讨论】：

【解决方案5】：

我对否定的stroke-dashoffet 也有同样的问题。因此，我改用正值并翻转 SVG。

在我的特殊情况下，我通过使用 transform:scaleX(-1) 翻转 SVG 来解决它。

根据您的要求，翻转 SVG 可能会起作用。

【讨论】：