CSS3 变换切断形状

Question

我有一个 SVG 矩形，我正在尝试对其进行动画处理以使其垂直无限移动，使其看起来像是在 float 。 当 rect 向下时，底部看起来被切断并变得更薄，我似乎无法弄清楚如何制作它以便在移动时完整的 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/