1

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.

1 Resposta 1

4

Você só vai conseguir por getElementById depois que o você inserir o svg no documento.

Segue exemplo:

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>

Neste segundo exemplo, vou colocar um evento de clique usando o shape que você já tinha criado, sem a necessidade de pegar ele de novo pelo 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>
6
  • Certo, mas caso clico nos outros circulos tambem aparece o alert, so queria que aparecesse num circulo, naquele que é identificado pelo id.
    – akm
    Commented 3/12/2014 às 18:37
  • Depois que você inseriu o svg com os cirulos na página, a qualquer momento você pode atribuir o evento de click. Commented 3/12/2014 às 18:44
  • jsfiddle.net/kyLuLshz Commented 3/12/2014 às 18:45
  • Exato, e caso quero alterar o raio de apenas um dos circulos, é so utilizar o seu id?
    – akm
    Commented 3/12/2014 às 18:46
  • Acredito que sim, não conheço muito bem como se trabalha com svg, mas você consegue pegar ele pelo id sim. Commented 3/12/2014 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .