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

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

\n

以下是SVG 规范对 的定义stroke-dashoffset。需要注意的一些事项：

\n

\n
1. 正值stroke-dashoffset不会使虚线从路径的起点向前移动到路径的终点：它们会将其向后移动。这是因为它被定义为“路径开始处到虚线图案的距离”，而不是您想象的“图案沿路径开始的距离”。
\n
2. 负值stroke-dashoffset并不会使虚线准确地向后移动。也就是说，从 > 0 到 < 0 的跨越并不总是继续破折号的顺利进行。真正的行为是奇特的\xe2\x9c\x9d，并且表面上看起来不可预测。
\n

\n

简而言之，dashoffset它的工作效果与您的预期完全不同。如果可能的话，您应该避免使用负值以避免混淆。

\n

解决方案

\n

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

\n

#path {\n  stroke-dasharray: 500;\n  animation: dash 2s ease reverse;\n}\n\n@keyframes dash {\n  from {\n    stroke-dashoffset: 500;\n  }\n}\n

\n

讨论\xe2\x9c\x9d

\n

我相信这种混乱最终源于规范中这一行的含糊之处：

\n

where s is the sum of the dash array values.\n

\n

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

\n

例如，对于stroke-dasharray="10"，规范表示看起来与规范stroke-dashoffset="-1"相同。stroke-dashoffset="9"但在 Chrome 和 Firefox 中，它看起来与stroke-dashoffset="19". 但是，如果您设置stroke-dasharray="10 10"，它似乎会按照您希望的方式运行。

\n

澄清规格

\n

这是我在规范上创建的有关负破折号偏移量的问题：\n https://github.com/w3c/svgwg/issues/795

\n

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

\n