无限循环动画SVG

Question

我目前正在使用应用程序 Keyshape 来生成动画 SVG。 没有使用循环导出动画 SVG 的选项。 如何以无限循环导出动画 SVG？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Keyshape -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" repeatCount="indefinite" style="white-space: pre;">
    <style>
        @keyframes a0_t { 0% { transform: translate(224.429px,25.8763px) rotate(45deg) translate(-28.5px,161.611px); } 50% { transform: translate(224.429px,25.8763px) rotate(45deg) translate(-28.5px,161.611px); } 100% { transform: translate(224.429px,25.8763px) rotate(45deg) translate(-28.5px,161.611px); } }
        @keyframes a0_h { 0% { height: 25px; } 100% { height: 25px; } }
        @keyframes a1_t { 0% { transform: translate(224.429px,25.8763px) rotate(45deg) translate(-28.5px,161.611px); } 50% { transform: translate(284.429px,5.87631px) rotate(45deg) translate(-28.5px,161.611px); } 100% { transform: translate(284.428766px,5.876309px) rotate(45deg) translate(-28.5px,161.611px); } }
        @keyframes a1_w { 0% { width: 25px; } 50% { width: 50px; } 100% { width: 50px; } }
        @keyframes a1_h { 0% { height: 25px; } 50% { height: 50px; } 100% { height: 50px; } }
        @keyframes a2_t { 0% { transform: translate(284.429px,5.87631px) rotate(45deg) translate(-28.5px,161.611px); } 50% { transform: translate(284.429px,5.87631px) rotate(45deg) translate(-28.5px,161.611px); } 100% { transform: translate(354.428782px,5.87631px) rotate(45deg) translate(-28.5px,161.611px); } }
        @keyframes a3_t { 0% { transform: rotate(45deg) translate(-28.5px,161.611px); } 50% { transform: rotate(45deg) translate(-28.5px,161.611px); } 100% { transform: rotate(45deg) translate(-28.5px,161.611px); } }
        @keyframes a3_w { 0% { width: 50px; } 50% { width: 50px; } 100% { width: 0px; } }
        @keyframes a3_h { 0% { height: 50px; } 50% { height: 50px; } 100% { height: 0px; } }
        @keyframes a3_mo { 0% { offset-distance: 0%; } 50% { offset-distance: 0%; } 100% { offset-distance: 100%; }
    </style>
    <rect width="25" height="25" fill="#6ba5b4" stroke-linecap="round" stroke-linejoin="round" rx="25" stroke="none" transform="translate(224.429,25.8763) rotate(45) translate(-28.5,161.611)" style="animation: a0_t 0.8s linear both, a0_h 0.8s linear both;"/>
    <rect width="25" height="25" fill="#6ba5b4" stroke-linecap="round" stroke-linejoin="round" rx="25" stroke="none" transform="translate(224.429,25.8763) rotate(45) translate(-28.5,161.611)" style="animation: a1_t 0.8s linear both, a1_w 0.8s linear both, a1_h 0.8s linear both;"/>
    <rect width="50" height="50" fill="#6ba5b4" stroke-linecap="round" stroke-linejoin="round" rx="25" stroke="none" transform="translate(284.429,5.87631) rotate(45) translate(-28.5,161.611)" style="animation: a2_t 0.8s linear both;"/>
    <rect width="50" height="50" fill="#6ba5b4" stroke-linecap="round" stroke-linejoin="round" rx="25" stroke="none" transform=" rotate(45) translate(-28.5,161.611)" style="animation: a3_t 0.8s linear both, a3_w 0.8s linear both, a3_h 0.8s linear both, a3_mo 0.8s linear both; offset-path: path('M354.429,5.87631L354.429,5.87631C381.872,25.8615,387.29,30.8282,404.429,42.75'); offset-rotate: 0deg;"/>
</svg>