Может ли кто-нибудь помочь мне для функции боковой флип, используя svg.js

Question

Я написал функцию flipUp, используя svg.js для отображения вверх и вниз изображения. Мне также нужна функция боковой перемотки, но я не могу реализовать функцию боковой флип, используя масштаб (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

Вы можете сделать это Wouldn» t потребность в 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; 
} 

Надеется, что это помогает, и дайте мне знать, если у вас есть какие-либо вопросы.