CODEWITHSUNDEEP
javascriptjquerysvgattr
Majid Fouladpour
Majid Fouladpour

Reputation: 30242

jQuery attr() fails to set attribute

I am trying to rotate an image via svg's transform. This is the code I have:

<svg width="100" height="100"> 
   <image id="trns" transform="rotate(90,50,50)" width="100" height="100" xlink:href="logo.png"/> 
</svg>

This successfully rotates logo.png by 90 degrees when the page loads. Also, when I change 90 to a different number in firbug's HTML tab the rotation changes accordingly. But when I try to change the value with jQuery, nothing happens:

$('#trns').attr('transform', 'rotate(60, 50,50)');

What does firebug do that my attr line does not?

Upvotes: 14

Views: 19352

Answers (4)

Allan
Allan

Reputation: 7

.attr() works in 3.1.1 like this

.attr({ style: "prop : val; prop : val; prop : val" })

this might be a way around version problems.

Upvotes: 0

Niklas
Niklas

Reputation: 30002

Working fine here (with jQuery 1.6.2): http://jsfiddle.net/niklasvh/k3Grd/

Make sure to call it once the DOM is ready:

$(function(){
 $('#trns').attr('transform', 'rotate(60,50,50)');
});

Upvotes: 8

Freek
Freek

Reputation: 1516

Very strange indeed, this seems to work

$('#trns')[0].setAttribute('transform','rotate(20,50,50)')

Also, if u look at $('#trns').attr('transform'), you are getting an object.. Not enough time to look into that now.

Upvotes: 5

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

If you're using jquery >= 1.6 try using prop instead of attr.
Hope this helps. Cheers

Upvotes: 3

Related Questions