Question

我有一个SVG矩形，我试图动画无限地垂直移动，使它看起来像是浮动的。当矩形向下时，底部看起来被切断并变得更薄，我似乎无法弄清楚如何制作它以便在移动时仍然存在完整的SVG形状。

这是我的JSFiddle

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 828 828" style="enable-background:new 0 0 828 828;" xml:space="preserve">
<style type="text/css">
  .st0{fill:none;stroke:#000000;stroke-width:50;stroke-miterlimit:10;}
</style>
  <rect id="box" x="26.9" y="26.1" class="st0" width="777.4" height="777.4"/>
</svg>
</div>

CSS：

.wrapper {
  width:50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin:0 auto;
  padding-top:5%;
  }

  #box {
  transform-origin:center;
  -webkit-animation-name: box;
  -webkit-animation-duration: 15s;
  -webkit-transform-origin:center;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
}

@-webkit-keyframes box {
  0% { -webkit-transform: translate(0px, 20px); }
  10% { -webkit-transform: translate(0px, -5px); }
  20% { -webkit-transform: translate(0px, 20px); }
  30% { -webkit-transform: translate(0px, -5px); }
  40% { -webkit-transform: translate(0px, 20px); }
  50% { -webkit-transform: translate(0px, -5px); }
  60% { -webkit-transform: translate(0px, 20px); }
  70% { -webkit-transform: translate(0px, -5px); }
  80% { -webkit-transform: translate(0px, 20px); }
  90% { -webkit-transform: translate(0px, -5px); }
  100% { -webkit-transform: translate(0px, 20px); }
}

谢谢 - 我真的很感激！

Answer 1

你应该转换包含svg的div：

<div id='box'> <!-- transform this guy -->
    <svg>
    </svg>
</div>

https://jsfiddle.net/foreyez/kxb52cjz/

CSS3转换切断形状

1 个答案: