javascript - SVG - rotate a SVG on click - Stack Overflow

admin管理员组

文章数量:1356858

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" ".1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="" xmlns: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: /

What am I doing wrong?

Many thanks

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/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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/Gue3P/

What am I doing wrong?

Many thanks

• javascript
• jquery
• html
• css
• svg

Share Improve this question Follow asked Apr 9, 2014 at 14:41 SpearfisherSpearfisher 8,8032424 gold badges7474 silver badges126126 bronze badges 2

• Where is #arrow referencing to because your SVG has another ID? – Tom Spee Commented Apr 9, 2014 at 14:45
• 1 If you want to rotate it why not use transform: rotate(). ? – Paulie_D Commented Apr 9, 2014 at 14:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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/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.

The CSS format is:

element {
    transform:rotate(90deg);
}

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.

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/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.

本文标签： javascriptSVGrotate a SVG on clickStack Overflow