ho il seguente codice SVG/Js

non riesco a capire perché funziona, senza la porzione di codice marcata con inizio/fine,
mentre inserendola (ed è praticamente identica alle righe che lo precedono ad eccezione per la variabile vecchioColore..) non va.
Mi sto la testa.help!
grazie
ciao
EnG

codice:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xmce="http://www.cesiricerca.it/namespaces" version="1.1" baseProfile="full" id="impianto">
<script type="text/ecmascript"><![CDATA[  
function cambiaColore(evt)
 {
 	//function set_fill(e,col)
 	//{
 	//	elem.setAttribute("fill",col);
 	//}
            var elem=evt.target;
            var vecchioColore=elem.getAttribute("fill");
            if (vecchioColore=="blue") nuovoColore="yellow"
            else nuovoColore="blue";
	  	for (i=0;i<100000;i++)
		{
	  		
		}
	    elem.setAttribute("fill",nuovoColore);
//INIZIO//////////////////////////////////////////////////////////	    
	  	for (i=0;i<100000;i++)
		{
	  		
		}
	    elem.setAttribute("fill",vecchioColore);	    
//FINE/////////////////////////////////////////////////////////	    
 }
 function cambiaRaggio(evt,dimensioneRaggio)
 {
            var elem=evt.target;
            elem.setAttribute("r",dimensioneRaggio);         
 }
  function mostraNascondi(evt)
 {
            var elem=evt.target;
            var d=elem.getAttribute("display");
            if (d=="inline")            {
            	 disp="none";
            } else
            {	 disp="inline";
            } 
            elem.setAttribute("display",disp);
 }
 ]]></script>
<defs>
  <symbol id="rettangolo" viewBox="0 0 155 105" preserveAspectratio="xMinYMin"> 
   <rect id="rettangolo1" x="10" y="10" width="140" height="90" fill="blue" stroke="black" stroke-width="2" onclick="cambiaColore(evt,'yellow')" />
  </symbol>   
  <symbol id="cerchio" viewBox="0 0 300 300" preserveAspectratio="xMinYMin"> 
   <circle id="cerchio1" cx="100" cy="100" r="100" fill="red" stroke="black" stroke-width="2" onmouseover="cambiaRaggio(evt,'100')" onmouseout="cambiaRaggio(evt,'50')"/>
  </symbol>   
</defs>
 <g id="background">
  <use xlink:href="#rettangolo" id="ufu" x="200" y="100" width="150" height="100"/>
  <use xlink:href="#cerchio" id="sus" x="0" y="100" width="150" height="100"/>
</g>
</svg>