SVG SMIL动画解决方案适用于Safari？

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元素上指定转换属性，因此Safari正在举手。

将您的矩形更改为：

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

一切都很顺利。