5

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/

4
  • Não entendi, você quer pegar o que esta dentro da tag <image> no caso o nome da classe que é img1 ou img2 ? Commented 27/01/2016 às 15:33
  • 1
    Seria melhor colocar o código do JSFIDDLE num snippet. Commented 27/01/2016 às 15:35
  • Quero obter apenas a class, em vez de obter o id de cada elemento
    – akm
    Commented 27/01/2016 às 15:36
  • Talvez isso também ajude pt.stackoverflow.com/questions/8010/… Commented 27/01/2016 às 15:36

3 Respostas 3

6

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.

4

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.

0
0

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;
1
  • 1
    Dessa forma você está retornando um SVGAnimatedString e não as classes propriamente ditas. O Autor não explicou bem a pergunta, mas creio que ele quer obter a classe ao clicar na imagem, como mostra o código nele. Seu código está certo, estou apenas deixando uma dica. xD
    – Randrade
    Commented 27/01/2016 às 15:46

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 .