Safari不支持负笔划-dashoffset......

这不是["Safari doesn't support negative stroke-dashoffset"](https://stackoverflow.com/a/39127818/2180570)，根据接受的答案。Safari实际上是遵循规范的。Chrome、Firefox等正在打破规范，可能是因为他们意识到规范定义得很差。 下面是SVG规范中stroke-dashoffset的定义。需要注意的事项： 1.正的stroke-dashoffset值不会使虚线从路径的起点向前移动到路径的终点：他们把它向后移动。这是因为它被定义为“路径开始的破折号模式的距离”，而不是你所认为的“沿着路径模式开始的距离”。 1.负的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.

“破折号数组值”是否表示用户在属性中提供的值？或者它是指处理后的值数组，奇数长度的数组被重复以产生偶数长度的数组（例如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"，它的行为似乎与您希望的一样。

澄清规格

下面是我在规范中创建的关于负破折号偏移的问题：https://github.com/w3c/svgwg/issues/795
如果你发现这令人沮丧，给予这个问题一些评论或👍的，也许他们会解决它。

如上所述，负值不适用于stroke-dashoffset。如果你把你的值移到正数，这应该可以工作（你也需要移动你的初始值）：

.path2 {
  stroke-dasharray: 1500;
}

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

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

我可以通过将stroke-dashoffset设置为stroke-dasharray的两倍值来获得所需的结果
第一步：

第二步：

我也遇到了同样的问题，负stroke-dashoffet。因此，我使用了正值，并翻转了SVG。
在我的特殊情况下，我通过使用transform:scaleX(-1)翻转SVG来解决它。
根据您的要求，翻转SVG可能会起作用。

SVG Animate标签似乎可以在没有css的情况下工作

<path stroke-dasharray="500" other attr>
    <animate 
      attributeName="stroke-dashoffset" 
      from="-500" 
      to="500"
      dur="3s" // duration
      begin="2s" // delay
      fill="freeze"/>
  </path>