CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Spearfisher
Spearfisher

Reputation: 8763

SVG - rotate a SVG on click

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

Upvotes: 1

Views: 8550

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105843

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.

Upvotes: 3

Tom Spee
Tom Spee

Reputation: 9269

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.

Upvotes: 2

Terry
Terry

Reputation: 66093

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.

Upvotes: 0

TylerH
TylerH

Reputation: 21100

The CSS format is:

element {
    transform:rotate(90deg);
}

Upvotes: 2

Related Questions