Identify SVG elements

Asked

Viewed 133 times

1

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.

javascript svg

1 answer

4


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>

  • Right, but if I click on the other circles also appears the Alert, I just wanted it to appear in a circle, in the one that is identified by the id.

  • After you have entered the svg with the circles on the page, at any time you can assign the click event.

  • http://jsfiddle.net/kyLuLshz/

  • Exactly, and if I want to change the radius of only one of the circles, just use your id?

  • I believe so, I don’t know very well how to work with svg, but you can catch it by id yes.

  • see this example: http://jsfiddle.net/7639nywf/

Show 1 more comment

Browser other questions tagged javascript svg

You are not signed in. Login or sign up in order to post.