SVG中的动画技术(3)

 1<svg contentscripttype="content-type">   
 2&gt;  content-type指定一种媒体类型，默认是"text/ecmascript" 
 3&gt; 
 4&gt; 2），在script元素里使用type属性来声明该段脚本所使用的语言类型。 
 5&gt;
 6&gt;&gt; 语法如下：   
 7&gt;  <script type="content-type">   
 8>  content-type就是所使用的媒体类型。 
 9
10SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里，也可以通过xlink:href属性，指定一个脚本文件的URL地址，比如： 
11
12<script type="text/JavaScript" xlink:href="test.js"></script>。 
13
14下面看一个利用SVG DOM产生动画的例子： 
15
16&gt; <?xml version="1.0" encoding="UTF-8" standalone="no"?>   
17&gt;  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   
18>
19  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;   
20&gt;  <svg height="4in" onload="main(evt);" viewbox="0 0 1000 1000" width="4in">   
21&gt;  <script type="text/ecmascript"><![CDATA[   
22>  var root; // 定义根   
23>  var svg; // 定义SVG元素   
24>  var canvas; // 空的画布   
25>  var array = new Array;   
26>  var speed = 80; // 速度   
27>    
28>  function main( evt ) {   
29>  svg = evt.getTarget();   
30>  root = svg.getOwnerDocument();   
31>  canvas = root.getElementById( 'canvas' );   
32>    
33>  for (i = 50; i < 900; i += 50 ) {   
34>  var obj = new_rectangle( 0, i );   
35>  array.push( obj );   
36>  canvas.appendChild( obj );   
37>  }   
38>    
39>  setInterval( frame, speed );   
40>  }   
41>    
42>  function new_rectangle( x, y ) {   
43>  var rectangle = root.createElement( 'rect' );   
44>  rectangle.setAttribute( 'x', x );   
45>  rectangle.setAttribute( 'dx', 0 );   
46>  rectangle.setAttribute( 'y', y );   
47>  rectangle.setAttribute( 'width', '50' );   
48>  rectangle.setAttribute( 'height', '50' );   
49>  rectangle.setAttribute( 'style',   
50>  'stroke: #050; stroke-width: 5; fill: #2f2;' );   
51>    
52>  return rectangle;   
53>  }   
54>    
55>  function frame() {   
56>  for (i=0; i<array.length; i++) {   
57>  var obj = array[i];   
58>  var x0 = new Number( obj.getAttribute( 'x' ) );   
59>  var dx0 = new Number( obj.getAttribute( 'dx' ) );   
60>  var dx = 1 + 3 * Math.round(Math.random() * dx0);   
61>  var x1 = x0 + dx;   
62>  obj.setAttribute( 'x', x1 );   
63>  obj.setAttribute( 'dx', dx );   
64>  obj.getStyle().setProperty( 'opacity', (1000 - x0) / 1000 );   
65>  if ( x1 >= 1000 ) {   
66>  obj.setAttribute( 'x', 0 );   
67>  obj.setAttribute( 'dx', 0 );   
68>  obj.getStyle().setProperty( 'opacity', 1 );   
69>  }   
70>  }   
71>  }   
72>    
73>  ]]></script>   
74&gt;  <defs>   
75&gt;  <lineargradient gradientunits="userSpace" id="grad1" x1="0" x2="100%" y1="0" y2="100%">   
76&gt;  <stop offset="0%" style="stop-color: #88f;"></stop>   
77&gt;  <stop offset="100%" style="stop-color: #008;"></stop>   
78&gt;  </lineargradient>   
79&gt;  </defs>   
80&gt;  <rect height="100%" id="background" style="fill: url(#grad1)" width="100%" x="0%" y="0%"></rect>   
81&gt;  <g id="canvas"></g>   
82&gt;  <text fill="#FFFFFF" style="font-size:36pt;" x="145" y="985">http://lucky.myrice.com</text>   
83&gt;  </svg>
84
85上面的例子中，首先找到要进行动画的元素的容器元素，即g；然后每隔50px高产生一个50*50的正方形，并把他们添加到g的节点中，最后每隔80毫秒,动态改变其位置和透明度，就可以看到动态的效果了！</svg>