SVG SMIL Animation не работает в Firefox, если он связан с defs - PullRequest
Новая
       64

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

0 голосов
/ 22 октября 2018

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

1 Ответ

0 голосов
/ 22 октября 2018

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

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