Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Referência: SOen.SOen.

Referência: SOen.

Referência: SOen.

Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

Vamos lá.

Primeiro, vamos alterar a forma que você está obtendo a classe, para isso:

 class_obj = document.getElementById(ddData.element.id).className.baseVal;
    console.log(class_obj);

Você está usando a string "id" e isso não é o id que você quer. Dessa forma estamos passando o ID da imagem para capturar o elemento. Feito isso, basta obter a classe do mesmo.

Ou podemos utilizar o .getAttribute("class") para obter a classe do elemento. Ficaria assim o seu código:

document.getElementById(ddData.element.id).getAttribute("class");
    console.log(class_obj);

Olhe um exemplo funcionando:

var svg = document.querySelector('svg');
        
    var shape = document.createElementNS("http://www.w3.org/2000/svg", "image");

    svg.appendChild(shape);
    svg.addEventListener('mousedown', mousedown);
    
    var ddData = {
        element: null,
        initialX: 0,
        initialY: 0,
        originalX: 0,
        originalY: 0,
        finalX: 0,
        finalY: 0,
        contadorElementos: 1,
        movidos: {},
        index: 0
    };

    //start move    
    function mousedown(e) {
            e.preventDefault();
            var evt = e || window.event;
            ddData.element = evt.target || evt.srcElement;
            if (!ddData.element || ddData.element.tagName == 'svg' || ddData.movidos[ddData.element.id]) return ddData.element = null;
            ddData.element.parentNode.appendChild(ddData.element.cloneNode(true));
            
            //img1
            if (ddData.element.id == "img1"){
                ddData.element.id = 1;
            }
            //img2
            if (ddData.element.id == "img1"){
                ddData.element.id = 2;
            }
            ddData.initialX = evt.clientX;
            ddData.initialY = evt.clientY;
            ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'x' : 'cx'));
            ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'y' : "cy"));
            var type = ddData.element.getAttribute('data-type');
      var arrTmp = document.querySelectorAll('[data-type="'+type+'"]');
      
      if(arrTmp.length>3){
        var el = arrTmp[0];
        el.parentNode.removeChild( el );
      }
    };
    
    
    var position_souris_x = [];
    var position_souris_y = [];
    var index_objet = []; 
    

                    
    svg.onmousemove = function (e) {
        e.preventDefault();
        var evt = e || window.event;
        var el = ddData.element;
        if (el) {
            var posX = ddData.originalX + evt.clientX - ddData.initialX;
            var posY = ddData.originalY + evt.clientY - ddData.initialY;
            
            if (el.tagName != 'circle') {
                el.setAttributeNS(null, "x", posX);
                el.setAttributeNS(null, "y", posY);
            }
            ddData.finalX = posX;
            ddData.finalY = posY;
            
        }
    }
    
    var nombre_image;
    x_sonde = [];
    y_sonde = [];
    x_compteur = [];
    y_compteur = [];
    
    //stops drag movement
    svg.onmouseup = function (e) {
        e.preventDefault();
        var evt = e || window.event;
                
        var id = ddData.element && ddData.element.id;
        if (id && !ddData.movidos[id]) ddData.movidos[id] = {
            x: ddData.finalX,
            y: ddData.finalY
        };
        
        //console.log("ID:"+index_objet);
        console.log("ID:"+ddData.element.id);
        
        
        position_souris_x.push(ddData.finalX);
        
        position_souris_y.push(ddData.finalY);      
                
        console.log("x: "+position_souris_x + " y: " + position_souris_y);
        
        nombre_image = position_souris_x.length;
           
   class_obj = document.getElementById(ddData.element.id).className.baseVal;
    console.log('className: ' + class_obj);
    
       class_obj = document.getElementById(ddData.element.id).getAttribute("class");
        console.log('getAttribute: ' + class_obj);
    
        ddData.element = null;
    }
    .img{cursor:move;}

.img2{cursor:no-drop;}
  <svg width="90%" height="500px">
    <image data-type="img1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon.png" id="1" x="0" y="0" height="20" width="20" class="img1"></image>
    <image data-type="img2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon1.png" id="img2" x="30" y="0" height="20" width="20" class="img2"></image>
<image></image><image data-type="img1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/favicon.png" id="img1" x="0" y="0" height="20" width="20" class="img1"></image></svg>

Seu exemplo editado no JSFiddle.

Referência: SOen.