svg 动画

以下是我写的代码，运行无错误，circle的圆心位置也改变，为什么不产生动画效果，高手指点下，谢谢~~~
<!DOCTYPE html>
<html>
<head>  
  <title>SVG Animation - Circle Translation</title>
  <script>  
    var timer;
    var delay = 16;
    var balls =[];

   function s2d(s)  
     {     
        return (s / 1000) * delay; // 速度：每秒同学屏幕的长度（单位;像素）；
     }        function Vector(x_coordinate, y_coordinate)
     {
        this.xc = x_coordinate; // "xc" 表示x轴方向的同意矢量.
        this.yc = y_coordinate; // "yc" 表示y轴方向的同意矢量.
     }

 //球的运动
    SVGCircleElement.prototype.moveBall = function()
     {   
   /*alert(this.getAttribute("cx"));
    var ball_cx = this.getAttribute("cx");
    ball_cx = parseInt(ball_cx)+parseInt(s2d(this.v.xc));
  
    var ball_cy = this.getAttribute("cy");
    ball_cy = parseInt(ball_cy)+parseInt(s2d(this.v.yc));
   
   
    //球心的设置
    this.setAttribute("cx", ball_cx);
    this.setAttribute("cy", ball_cy);
alert(this.getAttribute("cx"));*/
    alert( this.cx.baseVal.value + "===" + this.cy.baseVal.value);
 this.cx.baseVal.value += s2d(this.v.xc); 
         this.cy.baseVal.value += s2d(this.v.yc);
alert( this.cx.baseVal.value + "===" + this.cy.baseVal.value);

     }

    function init()
     {
   var ballElement; 
   var svgElement = document.getElementById("svgElement");
 
   var ele_g = svgElement.getElementById("g_id"); 
   var eles_cir = ele_g.getElementsByTagName("circle");  //得到g元素下所有的circle元素；
  
   for(var i=0;i<eles_cir.length;i++)
   {
      ballElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  ballElement.index = i;
  ballElement.id = eles_cir.item(i).getAttribute("id");
  ballElement.cx.baseVal.value = eles_cir.item(i).getAttribute("cx");
  ballElement.cy.baseVal.value = eles_cir.item(i).getAttribute("cy");
  ballElement.r.baseVal.value  = eles_cir.item(i).getAttribute("r");
  ballElement.v = new Vector(100, 80);
  balls[i] = ballElement;
   }
      
      timer = setInterval(doAnim, delay); 
  
     
      }  
        /* - - - - - - - - - - - - - - - - - - - - - - - -碰撞检测 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */  

function doAnim()
    { 
       balls[0].moveBall(); 
   
    }  


  </script>  
</head><body onLoad="init();">
  <div style="text-align: center; margin-top: 20px">    <svg id="svgElement" width="800" height="600" >
      <rect id="rect_id" x="100" y="150" id="arena" width="600" height="300" rx="10" ry="10" style="fill:green; stroke: black; stroke-width:2;" /> 
 
 <defs>
        <linearGradient id="MyGradient">
        <stop offset="20%" stop-color="#39F" />
        <stop offset="90%" stop-color="#F3F" />
        </linearGradient>
     </defs>

  <g id="g_id">
   <circle id="ball0" cx="200" cy="250" r="20"  fill="url(#MyGradient)"/>
       <circle id="ball1" cx="300" cy="300" r="40" fill="url(#MyGradient)"/>  
   <circle id="ball2" cx="300" cy="200" r="20" fill="white"/>  
   <circle id="ball3" cx="400" cy="400" r="20" fill="red"/>  
  </g>
  
   </svg> </div>  
</body>
</html>