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并更正文本元素上的样式语法错误使其对我有效。

＆＃13;

<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>

＆＃13;

如何将SVG圈动画转换为文本？

1 个答案: