任何人都可以使用 svg.js 帮助我实现侧翻功能吗答案

【问题标题】：Can anyone help me out for side flip function using svg.js任何人都可以使用 svg.js 帮助我实现侧翻功能吗
【发布时间】：2013-08-27 10:29:55
【问题描述】：

我使用 svg.js 编写了一个 flipUp 函数来上下翻转图像。我也需要一个侧翻功能，但我无法通过使用 scale(1,-1) 来实现侧翻功能。谁能帮帮我？

用personalise.js编写的函数flipUp如下：

function flipUp()
{
    var angle = parseInt(target.trans.rotation,10) + 180;
    //if(angle > 360) angle = angle -360
    console.log(angle)
    target.animate().rotate(angle)

    //target.animate().transform('matrix' ,'-1,0,0,-1,0,0')
}

并且该函数是从 design.html 中调用的，如下所示：

<a href="#" onclick="flipUp()"><img src='flip_up.PNG' alt="" height="20" width="20" style='margin-top:-41px;margin-left:267px'></a>

【问题讨论】：

请提供jsfiddle example你目前拥有的东西。
如何使用 jsfiddle.. 我不知道.. 每次我把它放在那里，它都不起作用.. 你能指导我吗？？

标签： html jquery-ui svg.js

【解决方案1】：

您无需svg.js 即可完成此操作。您只需要使用transform，尤其是rotate。另外不要忘记在角度添加deg。

DEMO

HTML：

<a href="#" onclick="flipUp(this)"><img src='flip_up.PNG' alt="" height="20" width="20" style='margin-top:-41px;margin-left:267px'></a>

JAVASCRIPT：

// el is the anchor element (a)
// el.children[0] is the img
// however, this assumes the first child of the anchor element is the img

var angle = 15;

function flipUp(el){

    el.children[0].style.transform = 'rotate(' + angle + 'deg)';

    // add 15 degs on every click
    angle += 15;
}

希望这对您有所帮助，如果您有任何问题，请告诉我。

【讨论】：