使用美丽的汤从多个svg帧创建循环svg动画

我有 3 个 svg。每个都是相同的图片,调整了几条曲线,例如。

我试图找到在 3 个 svg 中的每path一个id之间共享相同但包含不同d属性值的所有标签。

我希望这个程序从我作为输入的 svgs 创建一个循环的 svg 动画。例如,鉴于上面链接的 3 个 svg,我希望收到此 svg 作为结果

<svg height="30%" width="30%" version="1.1" viewBox="0 0 1425 1235" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M90.388,477.489c7.93,5.522 42.72,23.778 123.168,25.247l45.723,-146.361c35.197,-88.293 103.007,-173.582 188.525,-226.095c195.6,-120.109 443.676,-217.47 662.8,28.084c104.856,117.503 230.626,438.387 191.262,597.334c-7.603,30.699 -25.306,55.182 -28.377,78.869c32.654,102.706 75.639,172.731 131.01,239.734c42.352,51.247 -23.008,47.671 -73.889,22.326c-42.381,-21.111 -117.313,-82.062 -151.526,-129.06c-23.69,21.907 -48.312,43.978 -72.72,75.938c-5.334,6.985 -13.545,14.662 -24.216,22.653c-60.06,-5.641 -138.855,-2.492 -223.856,10.82c-119.253,18.677 -220.758,52.665 -272.729,87.741c-4.774,-1.651 -9.453,-3.461 -14.054,-5.403c-100.972,-42.615 -148.831,-90.767 -202.921,-151.15c-4.588,81.511 -47.64,156.094 -73.572,182.59c-48.323,49.376 -110.427,65.954 -65.61,-50.043c32.486,-84.083 42.849,-170.372 27.032,-257.969c4.406,9.107 7.802,14.023 15.683,21.643c-4.451,-4.367 -9.035,-8.794 -13.756,-13.276c-33.672,-31.964 -55.079,-100.363 -59.596,-171.002c-63.473,37.984 -111.095,23.103 -168.621,-0.648c-80.364,-123.877 66.105,-87.749 60.24,-241.972c-2.541,-1.752 -2.338,-2.214 -0.01,-0.416l0.01,0.416Z"><animate attributeName="d" begin="0s;body3.end" dur="1000ms" fill="freeze" to="M90.388,477.489c7.93,5.522 42.72,23.778 123.168,25.247l45.723,-146.361c35.197,-88.293 103.007,-173.582 188.525,-226.095c195.6,-120.109 443.676,-217.47 662.8,28.084c104.856,117.503 230.626,438.387 191.262,597.334c-7.603,30.699 -16.034,56.471 -25.146,78.55c28.108,106.676 75.609,192.707 28.097,269.683c-34.29,52.099 -53.98,44.382 -64.302,-1.716c-4.855,-35.336 -40.168,-71.575 -61.431,-134.648c-23.69,21.907 -48.312,43.978 -72.72,75.938c-5.334,6.985 -13.545,14.662 -24.216,22.653c-60.06,-5.641 -138.855,-2.492 -223.856,10.82c-119.253,18.677 -220.758,52.665 -272.729,87.741c-4.774,-1.651 -9.453,-3.461 -14.054,-5.403c-100.972,-42.615 -148.831,-90.767 -202.921,-151.15c1.683,67.906 24.023,110.639 41.511,140.039c31.774,53.42 24.85,94.64 -62.422,23.645c-84.554,-89.521 -119.559,-192.668 -99.02,-288.78c7.752,6.502 15.583,13.697 23.464,21.317c-4.451,-4.367 -9.035,-8.794 -13.756,-13.276c-33.672,-31.964 -55.079,-100.363 -59.596,-171.002c-63.473,37.984 -111.095,23.103 -168.621,-0.648c-80.364,-123.877 66.105,-87.749 60.24,-241.972c-2.541,-1.752 -2.338,-2.214 -0.01,-0.416l0.01,0.416Z"/><animate attributeName="d" begin="body1.end" dur="1000ms" fill="freeze" to="M90.388,477.489c7.93,5.522 42.72,23.778 123.168,25.247l45.723,-146.361c35.197,-88.293 103.007,-173.582 188.525,-226.095c195.6,-120.109 443.676,-217.47 662.8,28.084c104.856,117.503 230.626,438.387 191.262,597.334c-7.603,30.699 -25.306,55.182 -28.377,78.869c54.824,95.73 123.021,166.489 97.108,253.157c-19.597,59.211 -40.615,56.868 -62.545,15.027c-13.857,-32.867 -77.195,-101.72 -128.968,-135.184c-23.69,21.907 -48.312,43.978 -72.72,75.938c-5.334,6.985 -13.545,14.662 -24.216,22.653c-60.06,-5.641 -138.855,-2.492 -223.856,10.82c-119.253,18.677 -220.758,52.665 -272.729,87.741c-4.774,-1.651 -9.453,-3.461 -14.054,-5.403c-100.972,-42.615 -148.831,-90.767 -202.921,-151.15c-45.305,34.069 -77.472,148.605 -73.572,182.59c7.086,61.75 -16.126,96.51 -66.629,-4.019c-40.43,-116.313 -30.079,-224.746 28.051,-303.993c4.406,9.107 7.802,14.023 15.683,21.643c-4.451,-4.367 -9.035,-8.794 -13.756,-13.276c-33.672,-31.964 -55.079,-100.363 -59.596,-171.002c-63.473,37.984 -111.095,23.103 -168.621,-0.648c-80.364,-123.877 66.105,-87.749 60.24,-241.972c-2.541,-1.752 -2.338,-2.214 -0.01,-0.416l0.01,0.416Z"/><animate attributeName="d" begin="body2.end" dur="1000ms" fill="freeze" to="M90.388,477.489c7.93,5.522 42.72,23.778 123.168,25.247l45.723,-146.361c35.197,-88.293 103.007,-173.582 188.525,-226.095c195.6,-120.109 443.676,-217.47 662.8,28.084c104.856,117.503 230.626,438.387 191.262,597.334c-7.603,30.699 -25.306,55.182 -28.377,78.869c32.654,102.706 75.639,172.731 131.01,239.734c42.352,51.247 -23.008,47.671 -73.889,22.326c-42.381,-21.111 -117.313,-82.062 -151.526,-129.06c-23.69,21.907 -48.312,43.978 -72.72,75.938c-5.334,6.985 -13.545,14.662 -24.216,22.653c-60.06,-5.641 -138.855,-2.492 -223.856,10.82c-119.253,18.677 -220.758,52.665 -272.729,87.741c-4.774,-1.651 -9.453,-3.461 -14.054,-5.403c-100.972,-42.615 -148.831,-90.767 -202.921,-151.15c-4.588,81.511 -47.64,156.094 -73.572,182.59c-48.323,49.376 -110.427,65.954 -65.61,-50.043c32.486,-84.083 42.849,-170.372 27.032,-257.969c4.406,9.107 7.802,14.023 15.683,21.643c-4.451,-4.367 -9.035,-8.794 -13.756,-13.276c-33.672,-31.964 -55.079,-100.363 -59.596,-171.002c-63.473,37.984 -111.095,23.103 -168.621,-0.648c-80.364,-123.877 66.105,-87.749 60.24,-241.972c-2.541,-1.752 -2.338,-2.214 -0.01,-0.416l0.01,0.416Z"/></path>
<path d="M585.563,1164.72c51.971,-35.076 153.476,-69.064 272.729,-87.741c85.001,-13.312 163.796,-16.461 223.856,-10.82c-86.627,65.685 -334.207,156.146 -496.585,98.561Z"/>
<path d="M491.04,1016.28c25.012,82.237 -161.376,-72.451 -218.335,-247.372c-68.632,-210.764 57.284,-360.766 52.17,-274.215c-8.661,146.603 41.575,221.509 78.637,257.145c42.743,41.098 -9.601,103.399 87.528,264.442Z"/>
<path d="M608.243,298.276c286.93,-208.386 579.038,53.527 581.314,239.179c1.311,106.901 -46.786,260.387 -181.162,379.856c-137.592,122.327 -372.812,92.552 -453.901,-2.045c-189.563,-221.139 -39.975,-548.922 53.749,-616.99Z"/>
<path d="M608.243,298.276c286.93,-208.386 579.038,53.527 581.314,239.179c1.311,106.901 -46.786,260.387 -181.162,379.856c-137.592,122.327 -372.812,92.552 -453.901,-2.045c-189.563,-221.139 -39.975,-548.922 53.749,-616.99Z"/>
<path d="M565.155,377.691c-23.615,-75.845 254.333,-256.51 424.936,-115.441c145.506,120.315 126.534,227.928 46.861,172.366c-57.471,-40.079 -48.051,54.217 -83.708,90.688c-35.657,36.471 -29.422,-9.567 -21.867,-19.041c7.554,-9.473 23.436,-96.936 1.747,-124.383c-58.176,-73.624 -198.545,-148.967 -367.969,-4.189"/>
<path d="M361.774,452.286c15.776,39.392 326.932,-421.84 620.369,-234.755c101.254,64.556 54.669,-74.266 44.171,-104.085c-78.269,-222.301 -821.486,-53.05 -664.54,338.84Z"/>
<path d="M662.652,556.91c0,0 81.041,73.154 119.613,41.832c72.749,-59.073 164.032,-3.563 145.686,-29.31c-58.111,-81.55 -170.816,-64.419 -186.627,-92.966c-46.561,-84.068 23.43,-97.087 104.307,-84.059c46.312,7.46 12.796,-60.085 -72.787,-51.897c-85.584,8.189 -59.975,-36.02 -213,113.129c-45.652,44.497 -43.024,107.692 -14.766,131.964c24.351,20.917 76.667,11.144 117.574,-28.693Z"/>
<circle cx="761.392" cy="595.569" r="569.218"/>
<ellipse cx="761.348" cy="588.604" rx="573.642" ry="587.275"/>
<path d="M732.491,416.621c0,-0 88.324,-88.758 120.589,57.231c2.426,10.974 -25.186,-8.243 -43.227,-6.769c-16.291,1.331 -99.375,10.412 -77.362,-50.462Z"/>
<path d="M732.491,416.621c0,-0 88.324,-88.758 120.589,57.231c2.426,10.974 -25.186,-8.243 -43.227,-6.769c-16.291,1.331 -99.375,10.412 -77.362,-50.462Z"/>
<path d="M815.097,462.006c-0,-0 14.765,-10.241 16.439,-19.155c0.565,-3.008 4.131,24.514 -16.439,19.155Z"/>
<path d="M815.097,462.006c-0,-0 14.765,-10.241 16.439,-19.155c0.565,-3.008 4.131,24.514 -16.439,19.155Z"/>
<path d="M1019.77,559.134c8.027,-34.362 95.3,-29.021 72.988,41.685c-18.787,59.537 -77.6,-21.939 -72.988,-41.685Z"/>
<path d="M1019.77,559.134c8.027,-34.362 95.3,-29.021 72.988,41.685c-18.787,59.537 -77.6,-21.939 -72.988,-41.685Z"/>
<use height="28px" transform="matrix(-0.951159,0.308701,-0.308701,-0.951159,3393.28,2047.46)" width="15px" x="1782" xlink:href="#_Image1" y="2126"/>
<use height="28px" transform="matrix(-0.951159,0.308701,-0.308701,-0.951159,3393.28,2047.46)" width="15px" x="1782" xlink:href="#_Image1" y="2126"/>
<path d="M658.11,415.392c0,-0 69.359,-48.596 37.383,-54.906c-8.234,-1.625 -37.383,54.906 -37.383,54.906Z"/>
<path d="M887.503,728.479c0,0 15.894,-29.445 14.615,-42.536c-1.279,-13.091 -67.177,-73.041 -39.424,-101.493c27.69,-28.388 69.532,29.34 83.942,33.43c29.391,8.341 66.001,19.317 60.459,45.084c-4.119,19.147 -69.188,26.07 -82.039,29.221c-12.852,3.151 -15.381,3.779 -37.553,36.294Z"/>
<g>
<path d="M887.503,728.479c0,0 15.894,-29.445 14.615,-42.536c-1.279,-13.091 -67.177,-73.041 -39.424,-101.493c27.69,-28.388 69.532,29.34 83.942,33.43c29.391,8.341 66.001,19.317 60.459,45.084c-4.119,19.147 -69.188,26.07 -82.039,29.221c-12.852,3.151 -15.381,3.779 -37.553,36.294Z"/>
</g>
</g>
<path d="M672.368,633.498c-0,-0 31.856,103.495 119.981,87.051c88.125,-16.444 129.545,73.261 127.572,80.472"/>
<path d="M941.027,678.956c-0,-0 43.242,-18.237 49.164,-24.159c0.697,-0.697 -20.115,8.077 -28.937,11.448c-4.846,1.851 -25.415,12.711 -20.227,12.711Zm-65.763,-84.565c0.981,0.981 9.94,15.582 18.407,30.183c8.468,14.601 16.444,29.202 15.463,30.184c-1.963,1.963 -43.225,-69.722 -33.87,-60.367Z"><animate attributeName="d" begin="0s;nostrils3.end" dur="1000ms" fill="freeze" to="M941.027,678.956c-0,-0 44.385,0.596 49.164,-18.604c4.779,-19.201 -25.353,-17.04 -34.175,-13.67c-4.846,1.852 -26.057,29.547 -14.989,32.274Zm-65.763,-84.565c9.954,-1.864 25.298,4.262 34.715,15.336c9.417,11.075 12.907,27.098 -0.845,45.031c-16.643,21.702 -46.874,-57.933 -33.87,-60.367Z"/><animate attributeName="d" begin="nostrils1.end" dur="1000ms" fill="freeze" to="M941.027,678.956c-0,-0 44.385,0.596 49.164,-18.604c4.779,-19.201 -25.353,-17.04 -34.175,-13.67c-4.846,1.852 -26.057,29.547 -14.989,32.274Zm-65.763,-84.565c9.954,-1.864 25.298,4.262 34.715,15.336c9.417,11.075 12.907,27.098 -0.845,45.031c-16.643,21.702 -46.874,-57.933 -33.87,-60.367Z"/><animate attributeName="d" begin="nostrils2.end" dur="1000ms" fill="freeze" to="M941.027,678.956c-0,-0 43.242,-18.237 49.164,-24.159c0.697,-0.697 -20.115,8.077 -28.937,11.448c-4.846,1.851 -25.415,12.711 -20.227,12.711Zm-65.763,-84.565c0.981,0.981 9.94,15.582 18.407,30.183c8.468,14.601 16.444,29.202 15.463,30.184c-1.963,1.963 -43.225,-69.722 -33.87,-60.367Z"/></path>
<path d="M378.262,391.259c-44.772,30.19 -16.022,-68.092 32.522,-113.601c53.645,-50.29 -9.824,-42.449 -10.424,-74.046c-0.599,-31.597 300.539,-278.18 459.189,-160.546c200.64,148.769 107.416,117.626 -56.71,107.656c-109.157,-6.631 -312.99,165.291 -424.577,240.537Z"/>
<path d="M1018.06,639.992c-0,0 -83.794,-70.286 -34.784,-137.771c49.011,-67.485 34.15,-0.258 127.493,-27.957c49.156,-14.586 15.332,-39.879 11.529,-87.767c-3.803,-47.888 58.398,140.546 17.567,163.167c-40.83,22.621 -22.8,-44.471 -64.735,-39.486c-41.936,4.985 -82.338,20.343 -60.925,77.961c21.413,57.618 19.007,44.188 3.855,51.853Z"/>
<path d="M1235.07,510.204c-22.142,50.713 -99.804,-256.368 -168.88,-248.605c-49.132,5.522 36.505,-105.472 -4.805,-146.448c-41.31,-40.976 130.645,93.481 136.838,216.169c6.192,122.688 72.566,97.075 36.847,178.884Z"/>
<path d="M52.356,689.354c0,-0 18.398,-62.886 70.355,-66.715c52.272,-3.852 -49.634,-48.569 51.28,-108.221c44.556,-26.338 20.83,66.235 35.391,126.714c14.561,60.478 -58.286,86.654 -65.027,68.89c-6.741,-17.765 -50.149,49.164 -91.999,-20.668Z"/>
<path d="M1243.04,891.109c-0,0 19.388,-10.356 30.649,12.061c11.261,22.416 18.509,29.142 -0.674,35.51c-19.183,6.368 -18.397,-3.773 -39.132,-27.278c-7.505,-8.508 -12.926,-14.875 9.157,-20.293Z"/>
<path d="M820.715,636.96c3.651,0 10.509,1.258 12.136,5.182c2.529,6.098 2.631,13.246 3.683,19.589c7.669,46.217 -19.897,-5.243 -13.25,-18.766"/>
<path d="M826.565,644.266l-0,-0.505"/>
<path d="M803.97,664.549l0.496,-0"/>
<path d="M788.903,639.898l0.994,0"/>
<path d="M972.19,708.925l0.497,0"/>
<path d="M992.729,727.674l0,1.491"/>
<path d="M967.291,734.835c-0,1.643 -0.777,5.473 0.993,5.473"/>
<path d="M774.437,665.011l-0,-0.505"/>
<path d="M754.18,627.564l0,-1.01"/>
<path d="M996.541,765.558c-0,-0.743 0.119,-0.386 -0.505,-1.01"/>
<path d="M1026.8,747.332l-0,-2.022"/>
<defs>
<image height="28px" width="15px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAcCAYAAAC+lOV/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACDElEQVQ4ja2TT6sSURiHf47j3PfMnzs6YeQiGYVE2olQu0GFFhGRpLvSlbSxpQQtXAZBqz5Aq+7OlYvyOwQuXIkLIQkU2ugdzVSGOW00rle9o9Rvd857nvO8B94D/EP8XgcYY68dx5EBfD/5dkEQFgA4AHmn5gXruv513UH9ZDMRfaxWq5yI5gC0k8yr1eqnLMtuLpdzBUEonwQzxu5GIhGhVqspiqK8AeA7Giai+7FYDJlMBrquGwAeHA07jhOLx+Pw+XzI5/OSKIqPvJhNzgKBwNK2bc45581mkxuG8e1Y+Ekqlbrk64zHYy5J0hLAmWfbuq6/LJfL55t1MBiEaZoLAGkvq0hE08FgwK/GsqwJgKdeZss0TTcajW5tEpHPs21VVV+USiX1+j5jTPCCBdd1C8Vicad+jPlhOBwWEonETsG2bRfA4lDHUFX1U71ed/ieGIYxA3DvEHubiOaj0WgH7PV6nDFm48p8b0VRlA+VSmWxz1qpVH4zxt4fsp4T0azf7++A3W5386fv7CUlSXpbKBR+XQen0yk3TXMWCAReHbKSLMuTTqezBQ6HQ55Op2eapl0cAiGKYjWbzc42kOu6vNVq8VAoNFcU5R1uGCiNMTZpt9t8tVrxRqPBk8nkVNO0H36///FB4/qtnwFwy7IuiWip63oHwLObbH/DGLsgoi8AngO45Qn8j/wBAgsYD1q8YF4AAAAASUVORK5CYII="/>
<filter filterUnits="userSpaceOnUse" height="250.665" width="250.594" x="806.471" y="527.222">
<feGaussianBlur in="SourceGraphic" stdDeviation="16.3028"/>
</filter>
</defs>
</svg>
以上是使用美丽的汤从多个svg帧创建循环svg动画的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>