如果从 defs 链接，SVG SMIL 动画在 Firefox 中不起作用

Question

我想旋转多个对象。我正在 link 使用 use 标签并通过 defs 中定义的对象的 href 访问对象。在所有浏览器中，旋转动画都有效。仅在 Firefox (62.0.3 MacOS High Sierra) 中旋转动画不起作用。我还尝试使用已弃用的 xlink:href 到 link 对象。同样的问题在这里。有任何想法或解决方法可以使此示例在 Firefox 中运行吗？

是的，我知道，我可以通过 css-animation 来制作动画。但我需要这样，因为这个 svg 被用作动画背景图像。

<svg xmlns="http://www.w3.org/2000/svg" width="166" height="277" viewBox="0 0 166 277">
<defs>
  <rect id="myrect" width="20" height="20" fill="#FF0000">
    <animateTransform 
     id="mediumstaranimation"
       repeatCount="indefinite"
       attributeName="transform" type="rotate"
       from="0 10 10" to="360 10 10" begin="0" dur="4s" />
 </rect>
</defs>
  <g fill="none" fill-rule="evenodd">
    <use x="68" y="16" href="#myrect" />
    <use x="68" y="66" href="#myrect" />
  </g>
</svg>

Answer 1

这似乎是一个错误。将矩形包裹在一个组中作为解决方法。

<svg xmlns="http://www.w3.org/2000/svg" width="166" height="277" viewBox="0 0 166 277">
<defs>
  <g id="myrect">
    <rect width="20" height="20" fill="#FF0000">
      <animateTransform
     id="mediumstaranimation"
       repeatCount="indefinite"
       attributeName="transform" type="rotate"
       from="0 10 10" to="360 10 10" begin="0" dur="4s" />
    </rect>
  </g>
</defs>
  <g fill="none" fill-rule="evenodd">
    <use x="68" y="16" href="#myrect" />
    <use x="68" y="66" href="#myrect" />
  </g>
</svg>

如果从 defs 链接，SVG SMIL 动画在 Firefox 中不起作用

SVG SMIL Animation not working in Firefox if linked from defs

animation

svg

svg-animate