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

Question

我使用 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>

Answer 1

你可以做到这一点，不需要svg.js. 您只需要使用transform，尤其是rotate。也不要忘记添加deg角度。

演示

---

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

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