5

По непонятной причине не работает анимация в Firefox: http://codepen.io/SelenIT/pen/mHpDG/

<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>

<animate 
       xlink:href="#orange-circle"
       attributeName="cx"
       from="50"
       to="450" 
       dur="5s"
       begin="click"
       fill="freeze" 
       id="circ-anim"/>

<animate 
       xlink:href="#blue-rectangle"
       attributeName="x" 
       from="50"
       to="425" 
       dur="5s"
       begin="circ-anim.begin + 1s"
       fill="freeze" 
       id="rect-anim"/>

</svg>

Здесь следом за анимацией круга должна включаться анимация прямоугольника.

1
  • В IE11 даже на круге анимация не включается ;)
    – Visman
    24 сен 2015 в 7:38

2 ответа 2

4

Похоже, Firefox неверно интерпретирует выражение в атрибуте begin, если в id анимации, на которую это выражение ссылается, присутствует дефис. Скорее всего, Firefox интерпретирует дефис как минус и пытается вычислить выражение circ-anim.begin + 1s, но не может, так как не знает, что такое circ и anim. Переименуйте анимацию в circAnim, и всё заработает: http://codepen.io/anon/pen/gawXJZ

3

Скорее всего, Firefox интерпретирует дефис как минус и пытается вычислить выражение circ-anim.begin + 1s, но не может, так как не знает, что такое circ и anim. Переименуйте анимацию в circAnim, и всё заработает:

Да, совершенно верно, этот баг Firefox давно замечен, но прошло три года со времени ответа @fori1ton а он до сих пор присутствует.

Переименовал orange-cicle в id="orange_circle" и все остальные id тоже переименованы.

Анимация начинается после клика по оранжевому кругу

<svg width="500" height="350">
<circle id="orange_circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue_rectangle" width="50" height="50" x="25" y="100" fill="#0099cc"></rect>

<animate 
       xlink:href="#orange_circle"
       attributeName="cx"
       from="50"
       to="450" 
       dur="5s"
       begin="click"
       fill="freeze" 
       id="circ_anim"/>

<animate 
       xlink:href="#blue_rectangle"
       attributeName="x" 
       from="50"
       to="425" 
       dur="5s"
       begin="circ_anim.begin + 1s"
       fill="freeze" 
       id="rect_anim"/>

</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.