SVG -单击时旋转SVG

Question

当我点击SVG箭头时，我试图翻转它，但不知怎么它不起作用：

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>

联署材料：

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

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

我做错了什么？

非常感谢

Answer 1

你犯了那么多错误，你只是复制/粘贴了一些代码吗？这样做会好得多：

$('#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/

• 您应该指向正确的id。
• 使用.css()函数而不是.attr()来附加新样式。
• 确保你倒转，而不是从左到右的比例尺:这里的值应该是scale(1,-1)；并将x，y轴与，，idem分开，用于翻译。

Answer 2

CSS格式是：

element {
    transform:rotate(90deg);
}

Answer 3

如果我理解正确的话，你是想旋转你的SVG吗？在标题中，你说‘旋转’，但在描述中你说‘翻转’，所以这有点令人困惑。

如果您想旋转元素：

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

JSFiddle。

PS。在您的jQuery中没有选择一个JSFiddle版本。