Quero obter o nome da classe de um elemento SVG. Tenho o seguinte exemplo, mas não obtenho o seu nome:
class_obj = document.getElementbyId("id").className;
console.log(class_obj);
exemplo Jsfiddle: http://jsfiddle.net/twsthyds/34/
Quero obter o nome da classe de um elemento SVG. Tenho o seguinte exemplo, mas não obtenho o seu nome:
class_obj = document.getElementbyId("id").className;
console.log(class_obj);
exemplo Jsfiddle: http://jsfiddle.net/twsthyds/34/
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.
Se foi bem o que entendi, pegar o valor da classe seria algo assim:
var image = document.getElementsByTagName('image');
console.log(image[0].className);
console.log(image[1].className);
<svg width="90%" height=500px>
<image data-type="img1" xlink:href=/favicon.png id=img1 x=0 y=0 height=20 width=20 class="img1" />
<image data-type="img2" xlink:href=/favicon1.png id=img2 x=30 y=0 height=20 width=20 class="img2" />
</svg>
Neste caso é retornado um objeto com o seguinte valor:
SVGAnimatedString { baseVal="img1", animVal="img1"}
Você pode utilizar o .baseVal
ou .animVal
para acessar o valor diretamente.
Caso tenha a ID :
document.getElementById("id").className;
A diferença está no getElementById ["B" maiusculo]
Outro meio, caso queira acessar pelo tipo:
document.querySelector('svg>image').className;