我们对svg的文本已经不陌生，我们已经知道，svg里的text标签内的文本，具有HTML文本的特性，可以选择、复制，我们还知道，通过 textPath 与svg的路径 path 绑定，文本还可以拥有别开生面的呈现方式。可我们目前还不知道，svg的文本还可以动。试看以下代码和运行效果： 天若有情天亦老animate就是svg动画之一，它有诸多属性，让我们一一来理解：
① attributeName : 要变化的 text 标签里的属性名称。例中值为 x，指的是 x="10" 中的 x，起笔处
② attributeType : 要变化的标签类型，auto 指自动识别。本属性可不要，多数浏览器不会识别不了
③ from : 从哪开始变化
④ to : 变化到什么地方
⑤ dur : 动画一次运行的时长
⑥ repeartcount : 重复次数。indefinite 为无尽模式重复
瞧，一切都在HTML代码里设定，无需CSS定义样式和动画（但svg部分支持CSS）。 例中的 animate 标签代码里，我们略作改动，就可以令文本朝相反方向运行：from 和 to 的值对换一下便可。而要上下运动，首先需要改变svg的高度以便构建运动空间，然后 attributeName 的值指定为 y 就OK了。 至于 from 和 to 的值如何设定，这是根据需要来，这里要提醒的是，它们的值应与svg的高宽配套。还需要提醒一下，svg不好定位，如果需要将其随意放置，可将其作为div盒子里的子元素，这样我们只需改变div盒子的位置。
| 
发表于