任何人都可以帮助我使用svg.js进行侧翻功能

Question

我已经使用svg.js编写了一个flipUp函数来上下移动图像。我也需要侧翻功能但我无法通过使用scale（1，-1）来实现侧翻功能。任何人都可以帮助我吗？

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

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>

Answer 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;
}

希望这有帮助，如果您有任何问题，请与我联系。