Как преобразовать SVG-анимацию в текст?

Question

<svg width="1000" height="100">
 <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />

<animate 
       xlink:href="#orange-circle"
       attributeName="cx"
       from="50"
       to="900" 
       dur="2s"
       begin="0s"
       values="50; 990; 760; 900"
       keyTimes="0; 0.7; 0.8; 1"
       fill="freeze" 
       id="circ-anim"/>
</svg>

Я попытался написать это вместо строки с кружком:

<text id="textAnimation" x="25" y="25" font-size:24">Learn Now!</text>

, но текст не имеет анимации (да, я изменил id # orange-circle на#textAnimation)

Answer 1

Изменение cx на x, исправление href и исправление синтаксической ошибки стиля для текстового элемента делает его анимированным для меня.

<svg width="1000" height="100">
 <text id="textAnimation" x="25" y="25" style="font-size:24px">Learn Now!</text>

<animate 
       xlink:href="#textAnimation"
       attributeName="x"
       from="50"
       to="900" 
       dur="2s"
       begin="0s"
       values="50; 990; 760; 900"
       keyTimes="0; 0.7; 0.8; 1"
       fill="freeze" 
       id="circ-anim"/>
</svg>