jQuery attr() fails to set attribute

Question

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?

Niklas · Accepted Answer · 2011-07-02T11:17:33.110

8

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)');
});

edited Jul 02 '11 at 11:17

answered Jul 02 '11 at 10:18

Niklas

29,752
5
50
71

1

The problem was the version of jQuery I was using (1.3.2), once changed it to 1.6.2, it worked. – Majid Fouladpour Jul 02 '11 at 10:23
@Edgar - Speaking strictly, it isn't. But, this, and your answer, led me to checking the version which was the issue. I then upvoted yours, and accepted this one ;) – Majid Fouladpour Jul 02 '11 at 11:19
@Majid You can always post the answer yourself, then accept it. – lonesomeday Jul 02 '11 at 11:22
1

@lonesomeday - I know, though I am reluctant to. And in this case, I think a *working jsfiddle* **is** the answer. – Majid Fouladpour Jul 02 '11 at 11:29

score 5 · Answer 2 · answered Jul 02 '11 at 10:27

5

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.

answered Jul 02 '11 at 10:27

Freek

1,506
1
11
25

That indeed is strange, apparently `attr()` in 1.6.2 is sophisticated enough to manipulate the object in the right way. But with 1.3.2, which I used originally, it does not work. – Majid Fouladpour Jul 02 '11 at 10:35

score 3 · Answer 3 · answered Jul 02 '11 at 10:15

3

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

answered Jul 02 '11 at 10:15

Edgar Villegas Alvarado

18,204
2
42
61

5

How is that a property instead of an attribute? – Niklas Jul 02 '11 at 10:15

score 0 · Answer 4 · answered Oct 10 '16 at 19:19

0

.attr() works in 3.1.1 like this

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

this might be a way around version problems.

answered Oct 10 '16 at 19:19

Allan

7
3

jQuery attr() fails to set attribute

4 Answers4

Linked