Question

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

该问题在Safari（台式机版本）和手机（运行iOS 12.1.1）上的所有导航器中出现（据我测试）。我不知道这是其他OS手机中的行为。

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

当尝试在<use>标签内设置safari动画时，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; }

这里是codepen，其中包含该代码以及更多代码。

在提供的示例中，移动动画在safari和iOS导航器中工作正常，但箭头上的摇尾巴却没有。

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

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

是否有解决此问题的更理想的方法？我宁愿避免使用SMIL，因为我计划使用：hover和也需要JS的SMIL动画来触发动画。

如何在<use>标签

0 个答案: