javascript - 为什么跟随动画在不同的浏览器中不能按预期工作

Question

我使用 svg 制作了以下动画，但它们在 safari 和 chrome 上的处理方式完全不同。

let time;
document.querySelector('text').addEventListener('animationstart', () => time = performance.now())
document.querySelector('text').addEventListener('animationend', () => console.log(performance.now() - time))

svg {
  width: 100vw;
  height: 50vh;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: black;
  }
}

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s forwards;
  font-style: italic;
}

<svg>
 <text fill='none'  x="50%" y="50%"  text-anchor="middle" stroke="black" stroke-width="5.5" font-size="110">Example</text>
 </svg>

在 safari 上，动画将完成动画 stroke-dashoffset:0 几乎接近 JS 事件打印完成(我设置的 5s)，但在 chrome 上，动画将完成得更快(大约 3 或 2 秒)。它将等待几秒钟以触发 animationend 事件。

另外，safari 上的 fill 属性根本不起作用。

在 safari 中看起来像什么(没有 fill black):

我的问题:

为什么这两个浏览器处理动画的方式不同以及为什么 fill 在 Safari 中没有按预期工作？

我错过了什么？

Answer 1

对于 fill问题，Safari 将简单地拒绝从 none 开始动画，而其他浏览器将根据规范要求使用离散动画。这将从 none 切换至 black直接，在动画时间的中间。
如果您想要平稳过渡，请从 fill 开始transparent 的值.

setTimeout(() => {
  console.log("middle of anim");
}, 2500);

rect {
  animation: anim 5s linear forwards;
}
@keyframes anim {
  to {
    fill: black;
  }
}

<svg>
  <rect fill="none" width="50" height="50" />
  <rect fill="transparent" x="60" width="50" height="50" />
</svg>

对于 dashoffset问题……这有点复杂。值1000似乎对应于 Safari 为该文本计算的路径长度，而其他浏览器则更接近 500 .

let time;
document.querySelector('text').addEventListener('animationstart', () => time = performance.now())
document.querySelector('text').addEventListener('animationend', () => console.log(performance.now() - time))

svg {
  width: 100vw;
  height: 50vh;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: black;
  }
}

text {
  stroke-dasharray: 500; /* will draw half of the stroke in Safari */
  stroke-dashoffset: 500;
  animation: draw 5s forwards;
  font-style: italic;
}

<svg>
  <text fill="transparent"  x="50%" y="50%"  text-anchor="middle" stroke="black" stroke-width="5.5" font-size="110">Example</text>
</svg>

这种情况的正确解决方案是计算文本的路径长度，但是 there is still no API that allows to do that .因此，在您的情况下，最好的办法是事先将文本转换为实际路径数据，或者使用网络字体，通过 opentype.js 这样的库对其进行分析。 ，并从那里获取文本信息，尽管我没有测试此解决方案以查看 Safari 是否与库的结果匹配......所以如果可以的话，请使用 <path>解决方案。