亲爱的所有感兴趣的读者。
我目前正在使用应用程序Keyshape来生成动画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>