SVG问题与动画

Question

好的，所以我已经在这几天了，找不到有什么问题。我有我的代码渲染但是随机笔触颜色，笔触宽度，随机半径，随机y轴位置的许多圆圈位于页面的左侧或右侧（0％|| 100％），并移动到相反的一侧页面的随机速度。我的问题是他们的动画不会开始。我觉得我错过了一些基本的东西。任何人都可以帮我一把吗？

这是我的代码：

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" baseProfile="full" onload="init()" >
 <script type="text/javascript">
 <![CDATA[
    var svgns="http://www.w3.org/2000/svg";
    var xlinkns="http://www.w3.org/1999/xlink";
    function softColorGen(){
            var rgbArray=new Array();
            for(j=0;j<3;j++){
                rgbArray[j]=Math.ceil(Math.random()*85)+170;
            }
            return 'rgb('+rgbArray.toString()+')';
        }
    function circleCreator(numOfCircles){
            var cirArry = new Array();
            for(i=0;i<numOfCircles;i++){
                var whichSide=Math.round(Math.random());
                var cirEle = document.createElementNS(svgns,'circle');
                var randRad = (Math.random()*90)+10;
                cirEle.setAttributeNS(null,'r',randRad+'px');
                if(whichSide==0){
                    cirEle.setAttributeNS(null,'cx','0%');
                }else{
                    cirEle.setAttributeNS(null,'cx','100%');
                }
                cirEle.setAttributeNS(null,'cy',Math.random()*100+'%');
                cirEle.setAttributeNS(null,'fill','none');
                cirEle.setAttributeNS(null,'stroke',softColorGen()+'');
                cirEle.setAttributeNS(null,'stroke-width',Math.random()*10+5);
                var animEle = document.createElementNS(svgns,'animate');
                animEle.setAttributeNS(null,'attributeName','x');
                if(whichSide == 0){
                    animEle.setAttributeNS(null,'from','0%');
                    animEle.setAttributeNS(null,'to','100%');
                }else{
                    animEle.setAttributeNS(null,'from','100%');
                    animEle.setAttributeNS(null,'to','0%');
                }
                animEle.setAttributeNS(null,'dur',Math.random()*17+3+'s');
                animEle.setAttributeNS(null,'repeatCount','indefinite');
                animEle.setAttributeNS(null,'begin','indefinite');
                cirEle.appendChild(animEle);
                var defsEle = document.createElementNS(svgns,'defs');
                var filterEle = document.createElementNS(svgns,'filter');
                filterEle.setAttributeNS(null,'id','filter'+i);
                filterEle.setAttributeNS(null,'x','-75%');
                filterEle.setAttributeNS(null,'y','-75%');
                filterEle.setAttributeNS(null,'width','400%');
                filterEle.setAttributeNS(null,'height','400%');
                var fgbEle=document.createElementNS(svgns,'feGaussianBlur');
                fgbEle.setAttributeNS(null,'in','SourceGraphic');
                fgbEle.setAttributeNS(null,'stdDeviation','' + Math.floor(((randRad*(-1.0)+100)/10.0)));
                filterEle.appendChild(fgbEle);
                defsEle.appendChild(filterEle);
                document.getElementsByTagName('svg')[0].appendChild(defsEle);
                cirEle.setAttributeNS(null,'filter','url(#filter'+i+')');
                cirArry[i]=cirEle;
            }
            return cirArry;
        }
    function circleGenerator(numOfCircles){
            var cirArray = new Array();
            cirArray = circleCreator(numOfCircles);
            //console.log(cirArray);
            var swapOccurred;
            do{
                swapOccurred=false;
                for(i=0;i<cirArray.length-1;i++){
                    var cur=parseFloat(cirArray[i].r.baseVal.value);
                    var next=parseFloat(cirArray[i+1].r.baseVal.value);
                    console.log(cur);
                    console.log(next);
                    if(cur>next){
                        console.log('sorting');
                        var cirEleTemp = cirArray[i];
                        cirArray[i]=cirArray[i+1];
                        cirArray[i+1]=cirEleTemp;
                        swapOccurred=true;
                    }
                }
            }while(swapOccurred);
            //console.log(cirArray);
            for(i=0;i<cirArray.length;i++){
                document.getElementsByTagName('svg')[0].appendChild(cirArray[i]);
                var lastAnim=document.getElementsByTagName('animate').length-1;
                console.log(document.getElementsByTagName('animate')[lastAnim]);
                document.getElementsByTagName('animate')[lastAnim].beginElement();
            }
        }
    function init(){
        circleGenerator(2);
                //makeContent();
    }
 ]]>
 </script>
</svg>