Question

我从来没有真正使用过SVG，而是现在阅读一些关于它的教程并测试了一些东西。我正在学习如何制作像六边形的形状，但现在需要让它在垂直轴上向下翻转并扩大尺寸，同时保持非翻转六边形的底部为新翻转六边形的顶部。

我的代码在这里：

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

我的下一步是什么？

我是否使用库来执行此操作？

Answer 1

你可以使用Snap，因为你用那个标记了问题..

Snap('#test').animate({ transform: 't0,260s2,-2'},2000, mina.bounce)

翻译't'以及缩放''，因为底线会在放大时自动漂移（或者你可以从中心缩放）。

jsfiddle

Answer 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 modding才能在所有浏览器上使用。 https://jsfiddle.net/9xqqc1yk/

Answer 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 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>

使用SVG动画和翻转六边形

3 个答案: