Question

我想旋转多重对象。我将使用use标记和defs中已定义对象的href链接该对象。在所有浏览器中，旋转动画均有效。仅在Firefox（62.0.3 MacOS High Sierra）中，旋转动画不起作用。我还尝试使用不推荐使用的xlink：href链接到该对象。这里同样的问题。有什么想法或解决方法可以使此示例在firefox中工作？

是的，我知道，我可以通过CSS动画对其进行动画处理。但是我需要这种方式，因为此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

这似乎是一个错误。将rect分组，作为一种解决方法。

<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中使用

1 个答案: