javascript - Safari 的 SVG SMIL 动画解决方法？

Question

我在 Safari 中遇到基本 SVG 动画的问题。

它通过仅显示没有动画的 SVG 优雅地失败了，但如果可能的话，我希望它也能在 Safari 中工作。

动画与找到的示例非常相似 here :

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="110" width="110"
         style="stroke:#ff0000; fill: #0000ff">

        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            repeatCount="indefinite" 
        />
    </rect>

</svg>

最好是原生的，但如果需要一个库，那也没关系。

Answer 1

您没有在您的 rect 元素上指定 transform 属性，因此 Safari 正在举手。

将您的矩形更改为:

 <rect x="10" y="10" height="110" width="110"
         style="stroke:#ff0000; fill: #0000ff" transform="rotate(0 60 60)">

一切都很好。