Can anyone help me out for side flip function using svg.js

Question

I have written a flipUp function by using svg.js for fliping up and down an image. I need a side flip function also but I can not be able to implement side flip function by using scale(1,-1). Can anyone help me out?

function flipUp written in personalise.js as under:

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')
}

And the function is called from design.html as under:

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

Answer 1

You can accomplish this wouldn't the need for svg.js. You just need to use transform, in particular rotate. Also dont forget to add deg to the angle.

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

Hope this helps and let me know if you have any questions.