Почему атрибут «cx» у circle не изменяется при SVG анимации?

Question

[Антон П.]

По этой ссылке https://codepen.io/mrswylet/pen/ExaaQLx вы увидите пример анимации.
Там их три.
Первая, изменение размера - она работает. При старте первой анимации запускаются вторая и третья.
Вторая, изменение заливки - она работает.
Третья, изменение позиции, в частности я пытаюсь анимировать атрибут "cx" - она не работает.
Что я не правильно сделал? Почему может не работать третья анимация?

Answer 1

[RAX7]

href для анимации не указал

Comments

[Антон П.]

Дело точно не в href.
Для второй анимации я тоже href не указывал, и она работала.
Для того, что бы связать анимации, я первой задал id="another", а во второй и третей подписался на событие старта первой begin="another.begin".
Дело было в том, что я с ошибкой указал черный цвет во второй анимации, 5 нулей в место 6.
Но все равно спасибо, что приняли участие.

[RAX7]

Антон П., а теперь исправь цвет и открой в файрфоксе

[Антон П.]

RAX7, да. цвет тут не причем. Хотя, когда я писал ответ, как-то как то-то у меня получилось заставить все работать, но результат я не сохранил(.
Но в любом случаи, это должно работать через события, вторая же анимация работает.
Так что вопрос остается открытым

[RAX7]

Антон П.,

это должно работать через события

нет, не должно. Событие указывает когда начать анимацию. href указывает атрибут какого элемента анимировать. Они никак не связаны.

вторая же анимация работает

не работает. Открой в файрфоксе и увидишь это.

[Антон П.]

RAX7, странно. Я проверил и firefox, и safari на маке и на телефоне - работает. На Edge не работало, но тут такое...
Ладно, покурю эту тему, если ли чего не найду, помечу ваше решение

Answer 2

[Lynn «Кофеман»]

Вы забыли указать href. А в цветах у вас ошибка, пять нулей вместо шести.
Вот так всё работает

<svg viewBox="0 0 300 300" width="400">
  <circle id="circle" r="30" cx="150" cy="150" />
  
  <animate id="another" href="#circle"
           attributeName="r" 
           values="30;50;30"  
           repeatCount="indefinite"       
           dur="3s"/>
  <animate begin="another.begin" href="#circle"
           attributeName="fill"
           values="#000000;#ffe3e3;#000000"
           repeatCount="indefinite"
           dur="3s"/>
  <animate begin="another.begin" href="#circle"
           attributeName="cx"
           values="150;180;150"
           repeatCount="indefinite"
           dur="3s"/>
</svg>

Comments

[Антон П.]

Дело точно не в href.
Для второй анимации я тоже href не указывал, и она работала.
Для того, что бы связать анимации, я первой задал id="another", а во второй и третей подписался на событие старта первой begin="another.begin".
Дело было в том, что я с ошибкой указал черный цвет.
Спасибо вам.

[Антон П.]

К сожалению, цвет тут не причем. Хотя, когда я писал ответ, как-то как то-то у меня получилось заставить все работать, но результат я не сохранил(.
Но в любом случаи, это должно работать через события, вторая же анимация работает.
Так что вопрос остается открытым

[Lynn «Кофеман»]

Пример в ответе выше у меня в Firefox работает