Jacally

http://blog.csdn.net/net_lover/archive/2002/01/26/6891.aspx

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

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

语法如下：

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

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

语法如下：
。

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

xml 代码

1. xml version="1.0" encoding="UTF-8" standalone="no"?>  
3. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg height="4in" width="4in" viewBox="0 0 1000 1000" onload="main(evt);">  
5. <script type="text/ecmascript"> 
6. var root; // 定义根  
7. var svg; // 定义SVG元素  
8. var canvas; // 空的画布  
9. var array = new Array;  
10. var speed = 80; // 速度  
11.  
12. function main( evt ) {  
13. svg = evt.getTarget();  
14. root = svg.getOwnerDocument();  
15. canvas = root.getElementById( 'canvas' );  
16.  
17. for (i = 50; i < 900; i += 50 ) {  
18. var obj = new_rectangle( 0, i );  
19. array.push( obj );  
20. canvas.appendChild( obj );  
21. }  
22.  
23. setInterval( frame, speed );  
24. }  
25.  
26. function new_rectangle( x, y ) {  
27. var rectangle = root.createElement( 'rect' );  
28. rectangle.setAttribute( 'x', x );  
29. rectangle.setAttribute( 'dx', 0 );  
30. rectangle.setAttribute( 'y', y );  
31. rectangle.setAttribute( 'width', '50' );  
32. rectangle.setAttribute( 'height', '50' );  
33. rectangle.setAttribute( 'style',   
34. 'stroke: #050; stroke-width: 5; fill: #2f2;' );  
35.  
36. return rectangle;  
37. }  
38.  
39. function frame() {  
40. for (i=0; i 
41. var obj = array[i];  
42. var x0 = new Number( obj.getAttribute( 'x' ) );  
43. var dx0 = new Number( obj.getAttribute( 'dx' ) );  
44. var dx = 1 + 3 * Math.round(Math.random() * dx0);  
45. var x1 = x0 + dx;  
46. obj.setAttribute( 'x', x1 );  
47. obj.setAttribute( 'dx', dx );   
48. obj.getStyle().setProperty( 'opacity', (1000 - x0) / 1000 );   
49. if ( x1 >= 1000 ) {  
50. obj.setAttribute( 'x', 0 );  
51. obj.setAttribute( 'dx', 0 );  
52. obj.getStyle().setProperty( 'opacity', 1 );  
53. }  
54. }  
55. }  
56.  
57. ]]>script>  
58. <defs>  
59. <linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpace">  
60. <stop offset="0%" style="stop-color: #88f;"/>  
61. <stop offset="100%" style="stop-color: #008;"/>  
62. linearGradient>  
63. defs>  
64. <rect id="background" x="0%" y="0%" width="100%" height="100%" style="fill: url(#grad1)"/>  
65. <g id="canvas">g>  
66. <text x="145" y="985" style="font-size:36pt;" fill="#FFFFFF">http://lucky.myrice.comtext>  
67. svg>  
68.   

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