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);用x分开x，y轴，，同意使用翻译。

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属性。

SVG - 单击时旋转SVG

4 个答案: