Анимация SVG SMIL не работает в Firefox, если она связана с defs

Я хочу вращать несколько объектов. Я связываю объект с тегом использования и через href из определенного объекта внутри defs. Во всех браузерах работает анимация поворота. Только в 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>


svg animation svg-animate
person kimomat    schedule 22.10.2018    source источник
comment
Кажется, сейчас работает.   -  person Robert Longson    schedule 29.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, это ошибка. Оберните прямоугольник в группу в качестве обходного пути.

<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>

person ccprog    schedule 22.10.2018
comment
Спасибо, это получилось! - person kimomat; 23.10.2018