css - 如何让 SVG 动画在跨浏览器中工作标签

Question

我正在尝试创建动画 svg 以在网络中使用它们。我创建了一些，但在我的手机中将它们可视化时遇到了问题。我可以看到一些动画，但不是全部。

Safari（桌面版）和我手机上的所有导航器（运行 iOS 12.1.1）中都出现了这个问题（据我测试）。我不知道它在其他操作系统手机中的行为。

在搜索了类似的问题后，我找不到问题的根源，也找不到解决方案。最初它似乎与 -webkit- 前缀有关，但有些动画和变换有效，而另一些则无效。最后我开始做自己的测试，我想我找到了起源。它似乎与<use>标签有关。

当尝试在<use>标签内设置动画时，safari 不会对其进行动画处理。

一个 SVG 来说明它是：

<svg>
  <defs>
    <path id="shortSegment" d="M0 5a5 5 0 0 1 0 -10h20a5 5 0 0 1 0 10Z"/>
    <path id="longSegment" d="M0 5a5 5 0 0 1 0 -10h40a5 5 0 0 1 0 10Z"/>
    <g id="arrow">
      <use xlink:href="#shortSegment"  transform="rotate(135)"/>
      <use xlink:href="#shortSegment" transform="rotate(225)"/>
      <use xlink:href="#longSegment" transform="rotate(180)"/>
    </g>
    ...
  </defs>
  ...
  <use id="mainArrow" xlink:href="#arrow" x="275" y="300""/>
</svg>

使用以下 CSS：

@keyframes ShakingTail {
  0% {transform: rotate(-5deg)}
  50% {transform: rotate(5deg)}
  100% {transform: rotate(-5deg)}
}
#longSegment { animation: ShakingTail 0.5s linear infinite; }

这是一个带有该代码的代码笔以及更多内容。

在提供的示例中，移动动画在 safari 和 iOS 导航器中运行良好，但箭头中的摇尾却不行。

我能想到的解决问题的唯一方法是将动画元素从<use>标签中取出，但是：

• 我想保持 <use> 提供的可重用性和可读性。
• 该解决方案并不总是可行的（在提供的示例中，有很多箭头尾部，它们在另一个动画中，每个都可以应用自己的变换等）。
• 元素外部的动画使得应用某些变换（如缩放和旋转）变得更加困难（因为它变换超过 0 0 并且变换原点不适用），几乎使复杂的矩阵函数成为必须。

有没有更好的方法来解决这个问题？我宁愿避免使用 SMIL，因为我打算使用 :hover 和一个也需要 JS 的 SMIL 动画来触发动画。

标签： csssvg