I have this code to create SVG elements dynamically through a for, and a step number, which is the number of elements that are going to be created (by default equal to 10). I add an id to each element. I would now like to know if for example I click on one of the elements to know what your id. Then get the position of this element.
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];
};
}
I use the document.getElementById ('circle0') that is supposed to be the first circle, but nothing does.