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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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