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>

JS：

$('#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)；并用 a 分隔 x,y 轴 , , 同上使用 translate。

Answer 2

CSS 格式为：

element {
    transform:rotate(90deg);
}

Answer 3

如果我理解正确，您是在尝试旋转 SVG？在标题中您说“旋转”，但在描述中您说“翻转”，这有点令人困惑。

如果你想旋转你的元素：

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

JSFiddle.

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

Answer 4

第一件事：jQuery 没有加载到您的小提琴中，并且您的 <svg> 元素没有箭头 ID。修复它，或者在 jQuery 中更新你的选择器。之后，更新你的 jQuery 代码：

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

在此处查看更新的小提琴：http://jsfiddle.net/teddyrised/Gue3P/3/。我不知道你想如何旋转你的元素，我以180deg为例。

p/s：如果您想要平滑过渡，请记住为元素声明 transition 属性。