Как поменять цвет эллипса на желтый?

Stack Overflow на русском Asked on December 4, 2021

Почему не работает команда анимации <animateColor>?

<svg id="svg1" viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animateColor attributeName="fill" 
         from="red" to="yellow" dur="3s"
         repeatCount="indefinite"/>
</ellipse>
</svg>

svg svg animation

One Answer

MDN

Этот элемент <animateColor> - устарел в SVG 1.1 Second Edition и может быть удален в будущей версии SVG. Он не предоставляет функций, которые еще не доступны с помощью элемента <animate>. Поэтому авторам следует использовать элемент <animate>.

Заменяем <animateColor> на <animate> и всё работает

<svg id="svg1" viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animate attributeName="fill" 
         from="red" to="yellow" dur="3s"
         repeatCount="indefinite"/>
</ellipse>
</svg>

Answered by Alexandr_TT on December 4, 2021

Add your own answers!

Ask a Question

Get help from others!