Tenho este código para criar elementos SVG dinamicamente através de um for, e um número step, que é o número de elementos que vão ser criados.(por defeito igual a 10). Adiciono um id a cada elemento. Queria agora saber se por exemplo clico num dos elementos saber qual o seu id. Para depois obter a posição desse elemento.
for (var i = 0; i < steps; i++) {
var x = stepX * (i + 1);
var y = stepY * (i + 1);
//create circle
var shape = document.createElementNS(
"http://www.w3.org/2000/svg", "circle");
shape.setAttributeNS(null, "cx", originX + x);
shape.setAttributeNS(null, "cy", originY - y);
shape.setAttributeNS(null, "r", 5);
shape.setAttributeNS(null, "fill", "green");
shape.setAttributeNS(null, "class", "draggable");
shape.setAttributeNS(null, "order", i);
shape.setAttributeNS(null, "id", i);
shape.id="circle"+i;
svg.appendChild(shape);
document.write(shape.id);
shape.onmousedown = function(evt) {
var evt = evt || window.event;
ddData.element = evt.target || evt.srcElement;
ddData.initialX = evt.clientX;
ddData.initialY = evt.clientY;
ddData.originalX = parseFloat(
ddData.element.getAttributeNS(null, "cx"));
ddData.originalY = parseFloat(
ddData.element.getAttributeNS(null, "cy"));
var order = parseInt(
ddData.element.getAttributeNS(null, "order"));
ddData.lineEnd = lines[order];
ddData.lineStart = lines[order+1];
};
}
Utilizo o document.getElementById('circle0') que supostamente é o primeiro circulo, mas nada faz.