SVG中的动画技术(3)

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#脚本 #语言 #html #文档 #url

本文介绍如何使用SVG DOM技术和脚本语言创建动画效果。通过动态调整SVG元素的位置和透明度，实现连续移动的视觉效果。

SVG中的动画技术(3)

SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的，在SVG中使用脚本语言和HTML中类似，首先是指定脚本的语言类型：有两种办法可以指定脚本的语言类型

1），在SVG元素里使用contentScriptType属性，可以指定整个文档里使用的缺省脚本语言类型。

语法如下：

content-type指定一种媒体类型，默认是"text/ecmascript"

2），在script元素里使用type属性来声明该段脚本所使用的语言类型。

语法如下：
。

下面看一个利用SVG DOM产生动画的例子：

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

http://lucky.myrice.com

上面的例子中，首先找到要进行动画的元素的容器元素，即g；然后每隔50px高产生一个50*50的正方形，并把他们添加到g的节点中，最后每隔80毫秒,动态改变其位置和透明度，就可以看到动态的效果了！