Свойство Animate SVG, например цвет заливки, без сторонней библиотеки

Question

Как я могу сделать цвет заливки SVG circle одушевлен один раз от данного начала (непрозрачный черный) до данного конца (прозрачный / нет). Это должно быть вызвано функцией JavaScript, и анимация - это один выстрел продолжительностью несколько сотен миллисекунд. Как я могу сделать это с DOM/CSS без необходимости рисовать в сторонней библиотеке, такой как Snap.svg?

Поэтому, когда мой обратный вызов вызван

• установить немедленно fill: black
• переход в течение 200 мс fill: none

Answer 1

Попробуйте <animate> функция. Вот демо, которое не имеет внешней библиотеки.

Вы можете запустить анимацию из этого SO ответа

Answer 2

Используя чистый JS, вы можете достичь этого. В этом потоке есть функция, которая будет делать то, что вы просите: Animate без JQuery.

Функция берет элемент, атрибут для анимации и скорость в мс для выполнения анимации. В вашем случае что-то подобное было бы уместно animate(circle, fill, 300), Вам, вероятно, придется немного его изменить, чтобы приспособиться к уменьшению альфа-значения, но это идея.