使用SVG来动画和翻转六边形 [英] Using SVG to animate and flip a hexagon
本文介绍了使用SVG来动画和翻转六边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从来没有真正使用SVG，但现在阅读一些教程，测试一些东西。我正在学习如何使形状像一个六边形，但现在需要使它翻转在垂直轴上，并扩大大小，同时保持非翻转六边形的底部作为新的翻转的六边形的顶部。
I have never really used SVGs but reading some tutorials about it now and tested some stuff. I am learning how to make shapes like a hexagon but now need to make it flip down on the vertical axis and expanding in size while keeping the bottom of the non flipped hexagon as the top of the new flipped hexagon.
我的代码在这里：
<html>
<style>
#test:hover {
fill: yellow;
}
</style>
<body>
<div class="viewBox">
<h1>SVG Testing</h1>
<svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">
<path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
</svg>
</div>
</body>
</html>
我的后续步骤是什么？
推荐答案
您可以使用Snap，因为您已使用标记问题..
You can use Snap, as you have tagged the question with that..
Snap('#test').animate({ transform: 't0,260s2,-2'},2000, mina.bounce)
翻译't'以及缩放的底线会自动漂移（或者您可以从中心扩展）。
translate 't' as well as scale 's' as the bottom line would automatically drift change whilst scaling up (or you could scale from the center).
这篇关于使用SVG来动画和翻转六边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
