Skip to main content
adicionou 101 caracteres ao conteúdo
Fonte Link
akm
  • 3,4mil
  • 7
  • 31
  • 53

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.

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

}

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.

Fonte Link
akm
  • 3,4mil
  • 7
  • 31
  • 53

Identificar elementos SVG

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

}