Javascript-форум - Добавление элемента в SVG

Держи,когда то игрался день с svg и кросбраузерностью ,событиями и прочим , сам найдёшь блок динамического добавления,лень вырезать и подгонять-со строки 75
качество кода-тестовый вариант

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <head>
	<style type="text/css">
#apDiv1 {
	position:absolute;
	left:10px;
	top:14px;
	width:330px;
	height:180px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	width:100px;
	height:1px;
	z-index:1;
	left: 3px;
	top: 1px;
}
</style>
<script>
 <![CDATA[
    var obj_tocki={};
  obj_tocki.mas=[20,20,50,70,120,150,240,70,300,70];
  
  obj_tocki.over=function (e)
   {
     document.getElementById("apDiv2").style.display="";	 
   e = e || window.event;
   if(e.layerY)
    {
     kord_x = e.layerX;
	 kord_y=e.layerY;
	}
   else 
    {
	 kord_x = e.offsetX;
	 kord_y = e.offsetY;
	}
	
	for (i=0; i<obj_tocki.mas.length;i=i+2)
	 {
	   if (Math.abs(obj_tocki.mas[i]-kord_x)<=porog && Math.abs(obj_tocki.mas[i+1]-kord_y)<=porog )
	    {
		 if (f!=100) ukaz[f/2].setAttribute("fill", "green");
		 f=i; 	
		}
	  }
	if (f!=100)
	 {
	  document.getElementById("apDiv2").style.top=(obj_tocki.mas[f+1]-35)+"px"; 
	  document.getElementById("apDiv2").style.left=obj_tocki.mas[f]+"px"; 
	  document.getElementById("apDiv2").innerHTML=f;
	  ukaz[f/2].setAttribute("fill", "red")
	 }
   }
   
  obj_tocki.out=function ()
   {
	document.getElementById("apDiv2").style.display="none";  
	ukaz[f/2].setAttribute("fill", "green");
   }
   
 obj_tocki.obraboka=function ()
{
	var stroka="";
	for (i=0; i<obj_tocki.mas.length;i=i+2)
	 {
	    stroka=stroka+obj_tocki.mas[i]+","+obj_tocki.mas[i+1]+" ";	 
	 }
	
	 var canva = document.getElementById("canva");
	 var line  = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
	      line.setAttribute("points", stroka);
		  line.setAttribute("stroke-width", "3px");
		  line.setAttribute("fill", "none");
		  line.setAttribute("stroke", "blue");
		  canva.appendChild(line);
	var g=document.createElementNS("http://www.w3.org/2000/svg", "g");
		 g.setAttribute("fill-opacity", "0.7");
		 g.setAttribute("fill", "green");
	for (i=0; i<obj_tocki.mas.length;i=i+2)
	 {
	  var circle= document.createElementNS("http://www.w3.org/2000/svg", "circle");
	  circle.setAttribute("cx",obj_tocki.mas[i]+"px");
      circle.setAttribute("cy",obj_tocki.mas[i+1]+"px");
	  circle.setAttribute("r","7px");
	  g.appendChild(circle);
	 }
	canva.appendChild(g);
	ukaz=document.getElementsByTagName('circle');
	if(ukaz.length==0) ukaz=document.getElementsByTagName('svg:circle');
 }  
 var porog=10; 
 var f=100;
 var ukaz;
 
 	  
 ]]>
	</script>
  </head>
  <body>
<svg:svg width="330px" height="180px" id="canva">

    
</svg:svg>
<div id="apDiv1">
  <div id="apDiv2"></div>
</div> 
<script>
 <![CDATA[
	  
  if (window.addEventListener)
   {	
     document.getElementById("apDiv1").addEventListener("mousemove", obj_tocki.over, false);
     document.getElementById("apDiv1").addEventListener("mouseout",  obj_tocki.out, false);
   }
  else 
   {
	 document.getElementById("apDiv1").attachEvent("onmousemove", obj_tocki.over);
     document.getElementById("apDiv1").attachEvent("onmouseout",  obj_tocki.out);
	}
	  
   window.onload=obj_tocki.obraboka();	
 ]]>
</script>
  </body>
</html>