CSS3轉換切斷形狀

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 id='box'> <!-- transform this guy --> 
    <svg> 
    </svg> 
</div> 

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