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

【问题标题】：SVG SMIL Animation not working in Firefox if linked from defs如果从 defs 链接，SVG SMIL 动画在 Firefox 中不起作用
【发布时间】：2018-10-22 14:33:25
【问题描述】：

我想旋转多个对象。我将对象与 use 标记链接，并通过 defs 中已定义对象的 href 链接。在所有浏览器中，旋转动画都在工作。仅在 Firefox (62.0.3 MacOS High Sierra) 中旋转动画不起作用。我还尝试使用已弃用的 xlink:href 链接到该对象。这里同样的问题。有什么想法或解决方法可以让这个示例在 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>

【问题讨论】：

现在似乎可以工作了。

标签： animation svg svg-animate

【解决方案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>

【讨论】：

谢谢，成功了！