使用 SVG 动画和翻转六边形
Posted
技术标签:
【中文标题】使用 SVG 动画和翻转六边形【英文标题】：Using SVG to animate and flip a hexagon 【发布时间】：2016-12-30 19:30:34 【问题描述】：我从未真正使用过 SVG，但现在阅读了一些关于它的教程并测试了一些东西。我正在学习如何制作六边形的形状，但现在需要让它在垂直轴上向下翻转并扩大尺寸，同时保持未翻转六边形的底部作为新翻转六边形的顶部。
我的代码在这里：
<html>
<style>
#test:hover
fill: yellow;
</style>
<body>
<div class="viewBox">
<h1>SVG Testing</h1>
<svg 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>
我接下来的步骤是什么？
我是否使用库来执行此操作？
【问题讨论】：
【参考方案1】：您可以使用 Snap，因为您已经用它标记了问题..
Snap('#test').animate( transform: 't0,260s2,-2',2000, mina.bounce)
翻译“t”和比例“s”，因为底线会在放大时自动漂移变化（或者您可以从中心缩放）。
jsfiddle
【讨论】：
【参考方案2】：这是我根据我们得到的信息很快得出的结论。
#test:hover
fill: yellow;
transform:rotateX(-180deg) translateY(-100%) scale(1.2);
transition:ease 1s all;
transform-style: preserve-3d;
transform-origin: 100%;
下面是jsfiddle。 这可能需要 -webkit 修改才能在所有浏览器上使用。 https://jsfiddle.net/9xqqc1yk/
【讨论】：
不幸的是，SVG 元素上的preserve-3d 尚未被浏览器广泛支持。
感谢您对我进行了有关该主题的教育。那么我不得不说这可能不是最好的路线。【参考方案3】：
我做了类似的东西，看看吧..是这样吗？
#test
animation-fill-mode: forwards;
animation-timing-function: linear;
animation: hexagon 4200ms 1;
-webkit-animation-delay: 2600ms;/* Chrome, Safari, Opera */
animation-delay: 2600ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
@keyframes hexagon
0%,100%
rotateX(0deg);
fill: green;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
transform-origin: 0px;
30%
fill: green;
-ms-transform: scale(1, 0.08);
-webkit-transform: scale(1, 0.08);
transform: scale(1, 0.08);
transform-origin: 0px 90px;
50%
fill: yellow;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
transform-origin: 0px;
70%
fill: yellow;
-ms-transform: scale(1, 0.08);
-webkit-transform: scale(1, 0.08);
transform: scale(1, 0.08);
transform-origin: 0px 90px;
<html>
<body>
<div class="viewBox">
<h1>SVG Testing</h1>
<svg 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>【讨论】：
以上是关于使用 SVG 动画和翻转六边形的主要内容，如果未能解决你的问题，请参考以下文章