SVG - rotate a SVG on click

Question

I am trying to flip an SVG arrow when I click on it but somehow it is not working:

HTML:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="10px" height="6px" viewBox="0 0 10 6" enable-background="new 0 0 10 6" xml:space="preserve">
<g>
    <polygon fill="#000" points="5,6 0,2 0,0 5,4 10,0 10,2  "/>
</g>
</svg>

JS:

$('#arrow').click(function(){
        $(this).attr('transform', 'scale(-1 1) translate(-200 0)');
});

JSfiddle: http://jsfiddle.net/Gue3P/

What am I doing wrong?

Many thanks

Where is `#arrow` referencing to because your `SVG` has another `ID`? — Tom Spee, Apr 09 '14 at 14:45
If you want to rotate it why not use `transform: rotate().` ? — Paulie_D, Apr 09 '14 at 14:45

score 3 · Accepted Answer · answered Apr 09 '14 at 15:05

you made so much mistake, did you just copy/paste some code ? this would work much better :

$('#Calque_1').click(function(){
        $('#Calque_1').css('transform', 'scale(1,-1) ');// here point at same id, but could be any other selecteur if you wish
});

http://jsfiddle.net/Gue3P/5/

You should point at the right id .
Use .css() function and not .attr() to attach new style.
make you sure you flip upside down and not left to right with scale : value here should be scale(1,-1) ; and separate x,y axis with a , , idem for the use of translate.

score 2 · Answer 2 · answered Apr 09 '14 at 14:46

2

The CSS format is:

element {
    transform:rotate(90deg);
}

answered Apr 09 '14 at 14:46

TylerH

20,799
66
75
101

score 2 · Answer 3 · answered Apr 09 '14 at 14:50

2

If I understand correctly you are trying to rotate your SVG? In the title you say 'rotate' but in the description you say 'flip' so that's a bit confusing.

In case you want to rotate your element:

$('#Calque_1').click(function(){
    $(this).css('transform', 'rotate(180deg)');
});

JSFiddle.

PS. You didn't have a jQuery version selected in your JSFiddle.

answered Apr 09 '14 at 14:50

Tom Spee

9,209
5
31
49

1

jQuery v1.8 and above automatically handle vendor prefixes. You don't need to do that: http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes – Terry Apr 09 '14 at 14:51

score 0 · Answer 4 · answered Apr 09 '14 at 14:49

First thing first: jQuery is not loaded in your fiddle and your <svg> element does not have an ID of arrow. Fix it, or update your selector in jQuery. After that, update your jQuery code:

$('#arrow').click(function(){
    $(this).css({
        'transform': 'rotate(180deg)'
    });
});

See updated fiddle here: http://jsfiddle.net/teddyrised/Gue3P/3/. I do not know how do you want to rotate your element, and I am using 180deg as an example.

p/s: If you want a smooth transition, remember to declare the transition property for the element.

Will this rotate the SVG every time it's clicked? For example, if the SVG arrow is pointing down and you click it once, it rotates 180 degrees. Then if you click it a second time, it rotates again and points down again. — linnse, Apr 16 '21 at 16:25

SVG - rotate a SVG on click

4 Answers4