Держи,когда то игрался день с 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>
