Как сделать плавное вращение градиента в svg?

Question

[lagudal]

Есть простой эллипс, как элемент svg, например - ссылка
Надо сделать как бы иллюзию плавного вращения этого элемента, обозначить так сказать, 2 оборота или 720 deg. Подумалось, что как то вот с вращением градиента можно это реализовать, но пока не додумал, как именно.
Вижу в гугле пока 2 варианта решения, 1-й в примере по ссылке - с использованием animateTransform - attributeName="gradientTransform" и type="rotate".
Но как видно, плавного вращения нет, есть моментальный поворот после времени ожидания, почему? Как исправить?
Еще вроде бы был такой вариант: отрисованный в иллюстраторе эллипс не заливать градиентом, а сделать обтравочную маску с соседним градиентным контуром. И тогда работать уже не с "rotate" а с "matrix", но тут что то вообще у меня никакой реакции...
Подскажите, плз, что не так делаю?

Answer 1

[Максим]

https://svg-art.ru/?p=1239 - сайт svg-art самый лучший по svg , его владелец

Comments

[lagudal]

спасибо, разобрался.
Вообще в svg столько тонкостей, что иногда без ста грамм не разобраться ))
В моем случае, использование конструкции animateTransform attributeName="gradientTransform" type="rotate" values="90" приводит к повороту на 90 град, а animateTransform attributeName="gradientTransform" type="rotate" from="0" to="90" - к искомому вращению градиента на заданный угол.
И не забыть добавить после угла координаты центра вращения.
Если кому интересно, вот ссылка на весь svg.