SVG 笔划-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

这并不是说 “Safari 不支持负的‘中风破折号’”，根据接受的答案。 Safari 实际上遵循了该规范。 Chrome、Firefox 等正在打破规范，可能是因为他们意识到规范定义不明确。

这是 SVG 规范对

stroke-dashoffset

的定义。一些注意事项：

1. 正

   stroke-dashoffset

   值不会使虚线从路径的起点向前移动到路径的终点：它们会将其向后移动。这是因为它被定义为“路径开始处的虚线图案的距离”，而不是您想象的“图案沿路径开始的距离”。
2. 负

   stroke-dashoffset

   值不会使虚线准确地向后移动。也就是说，从 > 0 跨越到 < 0 does not always continue the smooth march of dashes. The true behavior is peculiar✝ and appears unpredictable on the surface.

简而言之，

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

如果您觉得这令人沮丧，请给这个问题一些评论或👍，也许他们会解决它。

Answer 3

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

.path2 {
  stroke-dasharray: 1500;
}

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

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

Answer 4

我只需将

stroke-dashoffset

动画化为

stroke-dasharray

的双倍值即可获得所需的结果

第一步：

第二步：

Answer 5

我也有同样的问题，负面的

stroke-dashoffet

。因此，我改用正值并翻转 SVG。

在我的特定情况下，我通过使用

transform:scaleX(-1)

翻转 SVG 来解决它。

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

Answer 6

这是一个解决方案，适用于我在 Safari 中应用负

stroke-dashoffset

值并为其设置动画：

只需对

stroke-dasharray

使用两个值而不是一个。之后 Safari 的行为就像 Chrome 和 Firefox。

所以使用

stroke-dasharray="150 150"

而不是

stroke-dasharray="150"

。

在这里找到：https://www.denisbouquet.com/svg-animation-direction-wrong-in-safari/

Answer 7

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>