Как анимировать css градиент в SVG?

Question

[tyoma_koder]

Нужно сделать эффект вытекающего текста, т.е. как в прямоугольнике в примере, кроме как градиентом я не придумал как это сделать, но проблема в том что transition не работает на linear-gradient, keyframes тоже не делает анимацию с градиентом, я решил использовать SVG анимацию, но если туда просто прописать значения градиента то он не работает, как это реализовать?
https://jsfiddle.net/morskaya_ulitochka/1k7bjwzs/17/

Comments

[v3shin]

https://css-tricks.com/how-to-do-knockout-text/ Подойдет?

[tyoma_koder]

v3shin, так я -webkit-background-clip и использую, проблема в анимации фона

Answer 1

[Максим]

Так ?

Comments

[tyoma_koder]

нет, так

[Максим]

tyoma_koder, исправил

[tyoma_koder]

Максим Ленский, спасибо, не знаете, есть в svg круговая интерполяция?

[Максим]

tyoma_koder, если покажите скриншот - я посмотрю

[tyoma_koder]

Максим Ленский, есть дуга, я хочу её анимировать так, чтобы она превращалась из дуги в целый круг, но без круговой интерполяции придётся рассчитывать координаты края круга

<svg width="0" height="0" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
		<!--центр круга, радиусы круга, поворот, большая или меньшая дуга, по часовой или против, координаты конца дуги-->
		<clipPath id="arc" clipPathUnits="objectBoundingBox">
			<path d="M.6,-.1 A.6,.6 0 1 0 1.2,.5 L.5,.5 L.5,-.1" fill="yellow" fill-opacity="0.8"></path>
		</clipPath>
	</svg>

[Максим]

tyoma_koder, https://codepen.io/topicstarter/pen/vYyzQeM

[tyoma_koder]

Максим Ленский, нужна не просто обводка, а именно как пакман

[Максим]

tyoma_koder,

Answer 2

[Олег]

js

Comments

[tyoma_koder]

но в js не задать длительность анимации, разве что setInterval каждые 30ms

[Олег]

tyoma_koder, в js можно программно хоть каждую миллисекунду вычислять состояние объекта - всё остальное зависит от устройства, на котором код выполняется