Identify SVG elements

Question

I have this code to dynamically create SVG elements through a for, and a step number, which is the number of elements that will be created.(default equals 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 their id. To 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') which supposedly is the first circle, but does nothing.

Answer 1

You will only get by getElementById after you insert the svg into the document.

Following example:

http://jsfiddle.net/e99nyam7/

<svg width="200" height="500"></svg>
<script>
var svg = document.getElementsByTagName('svg')[0];
steps = 10;
stepX = 10;
stepY =  -10;
originX = 0;
originY = 0;

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);

    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];

    };

    alert(document.getElementById('circle0'));

}
</script>

In this second example, I will put a click event using the Shape you had already created, without the need to pick it up again by getElementById

http://jsfiddle.net/kyLuLshz/

<svg width="200" height="500"></svg>
<script>
var svg = document.getElementsByTagName('svg')[0];
steps = 10;
stepX = 10;
stepY =  -10;
originX = 0;
originY = 0;

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);

    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];

    };

    shape.onclick = function(){
       alert(this.id);
    };

}
</script>