SVG stroke-dashoffset不适用于safari

Question

即使我添加了-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;
  }
}

Answer 1

Safari不支持负冲程 - dashoffset ......

Answer 2

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

.path2 {
  stroke-dasharray: 1500;
}

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

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

Answer 3

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

这里是SVG spec's definition of stroke-dashoffset。注意事项：

1. 正stroke-dashoffset值从路径的起点到路径的终点不会使虚线向前移动：它们会向后移动。这是因为它被定义为“路径开始到虚线模式的距离”，而不是您想的那样“路径开始沿路径的距离”。
2. 负stroke-dashoffset值不会精确地使虚线向后移动。也就是说，从> 0到<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"，则规范的行为似乎与您希望的一样。

Answer 4

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

在我的特定情况下，我通过使用transform:scaleX(-1)翻转SVG来解决了该问题。

根据您的要求，可以翻转SVG。

Answer 5

我只需将 stroke-dashoffset 动画化为 stroke-dasharray 的两倍值

第一步：

第二步：