SVG中的动画技术怎么样？

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

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

语法如下：

<svg contentScripttype="content-type">

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

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

语法如下：

<script type="content-type">

content-type就是所使用的媒体类型。

SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里，也可以通过xlink:href属性，指定一个脚本文件的URL地址，比如：

<script type="text/JavaScript" xlink:href="test.js"></script>。

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

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

<svg height="4in" width="4in" viewBox="0 0 1000 1000" onload="main(evt);">

<script type="text/ecmascript"><![CDATA[

var root; // 定义根

var svg; // 定义SVG元素

var canvas; // 空的画布

var array = new Array;

var speed = 80; // 速度

function main( evt ) {

svg = evt.getTarget();

root = svg.getOwnerDocument();

canvas = root.getElementById( 'canvas' );

for (i = 50; i < 900; i += 50 ) {

var obj = new_rectangle( 0, i );

array.push( obj );

canvas.appendChild( obj );

}

setInterval( frame, speed );

}

function new_rectangle( x, y ) {

var rectangle = root.createElement( 'rect' );

rectangle.setAttribute( 'x', x );

rectangle.setAttribute( 'dx', 0 );

rectangle.setAttribute( 'y', y );

rectangle.setAttribute( 'width', '50' );

rectangle.setAttribute( 'height', '50' );

rectangle.setAttribute( 'style',

'stroke: #050; stroke-width: 5; fill: #2f2;' );

return rectangle;

}

function frame() {

for (i=0; i<array.length; i++) {

var obj = array[i];

var x0 = new Number( obj.getAttribute( 'x' ) );

var dx0 = new Number( obj.getAttribute( 'dx' ) );

var dx = 1 + 3 * Math.round(Math.random() * dx0);

var x1 = x0 + dx;

obj.setAttribute( 'x', x1 );

obj.setAttribute( 'dx', dx );

obj.getStyle().setProperty( 'opacity', (1000 - x0) / 1000 );

if ( x1 >= 1000 ) {

obj.setAttribute( 'x', 0 );

obj.setAttribute( 'dx', 0 );

obj.getStyle().setProperty( 'opacity', 1 );

}

}

}

]]></script>

<defs>

<linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpace">

<stop offset="0%" style="stop-color: #88f;"/>

<stop offset="100%" style="stop-color: #008;"/>

</linearGradient>

</defs>

<rect id="background" x="0%" y="0%" width="100%" height="100%" style="fill: url(#grad1)"/>

<g id="canvas"></g>

<text x="145" y="985" style="font-size:36pt;" fill="#FFFFFF">http://lucky.myrice.com</text>

</svg>

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