使用 Beautiful soup 从多个 svg 帧创建循环 svg 动画

Posted

技术标签:

【中文标题】使用 Beautiful soup 从多个 svg 帧创建循环 svg 动画【英文标题】：Using Beautiful soup to create a looping svg animation from multiple svg frames 【发布时间】：2021-09-07 13:43:00 【问题描述】：

我有 3 个 svg。每张都是相同的图片，调整了几条曲线，for example。

我正在尝试查找所有 path 标记，它们在 3 个 svg 中的每一个之间共享相同的 id，但其中包含 d 属性的不同值。

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

<svg   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;" version="1.1" viewBox="0 0 1425 1235"  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" id="body" style="fill:#e1e1c5;stroke:#000;stroke-width:12px;"><animate attributeName="d" begin="0s;body3.end" dur="1000ms" fill="freeze" id="body1" 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" id="body2" 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" id="body3" 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" style="fill:#eeeede;stroke:#000;stroke-width:8.5px;"/>
<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" style="fill:#c4c59b;"/>
<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" style="fill:#e0d4bc;stroke:#000;stroke-width:8.5px;"/>
<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" style="fill:#e0d4bc;stroke:#000;stroke-width:8.5px;"/>
<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" style="fill:#434132;"/>
<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" style="fill:#9b9365;"/>
<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" style="fill:#bbae84;"/>
<circle cx="761.392" cy="595.569" r="569.218" style="fill:none;"/>
<ellipse cx="761.348" cy="588.604" rx="573.642" ry="587.275" style="fill:none;"/>
<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" style="stroke:#000;stroke-width:1px;"/>
<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" style="stroke:#000;stroke-width:1px;"/>
<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" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<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" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<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" style="stroke:#000;stroke-width:1px;"/>
<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" style="stroke:#000;stroke-width:1px;"/>
<use  transform="matrix(-0.951159,0.308701,-0.308701,-0.951159,3393.28,2047.46)"  x="1782" xlink:href="#_Image1" y="2126"/>
<use  transform="matrix(-0.951159,0.308701,-0.308701,-0.951159,3393.28,2047.46)"  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" style="fill:#090000;stroke:#000;stroke-width:1px;"/>
<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" style="fill:#434343;stroke:#000;stroke-width:1px;"/>
<g style="filter:url(#_Effect2);">
<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" style="fill:#434343;stroke:#000;stroke-width:1px;"/>
</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" style="fill:none;stroke:#000;stroke-width:9px;"/>
<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" id="nostrils" style="stroke:#000;stroke-width:1px;"><animate attributeName="d" begin="0s;nostrils3.end" dur="1000ms" fill="freeze" id="nostrils1" 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" id="nostrils2" 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" id="nostrils3" 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" style="fill:#434132;"/>
<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" style="fill:#c7caab;"/>
<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" style="fill:#c7caab;"/>
<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" style="fill:#799f90;"/>
<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" style="fill:#a3bca6;"/>
<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" style="fill:none;"/>
<path d="M826.565,644.266l-0,-0.505" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M803.97,664.549l0.496,-0" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M788.903,639.898l0.994,0" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M972.19,708.925l0.497,0" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M992.729,727.674l0,1.491" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M967.291,734.835c-0,1.643 -0.777,5.473 0.993,5.473" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M774.437,665.011l-0,-0.505" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M754.18,627.564l0,-1.01" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M996.541,765.558c-0,-0.743 0.119,-0.386 -0.505,-1.01" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<path d="M1026.8,747.332l-0,-2.022" style="fill:none;stroke:#000;stroke-width:8.5px;"/>
<defs>
<image  id="_Image1"  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"  id="_Effect2"  x="806.471" y="527.222">
<feGaussianBlur in="SourceGraphic" stdDeviation="16.3028"/>
</filter>
</defs>
</svg>

这是我创建这个 svg 的 python 和 BeautifulSoup 程序

from bs4 import BeautifulSoup
from re import compile

def handler_from_file(filename):
    html = open(filename, 'r')
    return BeautifulSoup(html, 'xml')

def group(svgs):
    """The first svg is a base img. Adds additional svgs as animation tags

    Args:
        svgs ([[string, int]]): [[svg filename, length of animation]]
    """
    base = handler_from_file(svgs[0][0])
    tags = base.find_all('path')
    soups = [handler_from_file(name) for [name, dur] in svgs]
    durs = [svg[1] for svg in svgs]

    for tag in tags:

        id = tag.get('id')
        d = tag.get('d')

        if not id:
            continue

        matches = [x for x in [s.find('path', id=id) for s in soups] if x is not None]
        if (len(matches) == 0):
            continue
        ds = [mch.get('d') for mch in matches]
        if (len(set(ds + [d])) == 1):
            continue

        # print(f"ds: len(ds), durs: len(durs), range: range(1,len(ds)) ")
        for cnt in range(1,len(ds)):
            animId = f"id-str(cnt)"
            animate = base.new_tag('animate', id=animId)
            animate.attrs['to'] = ds[cnt]
            animate.attrs['attributeName'] = 'd'
            animate.attrs['dur'] = f"durs[cnt]ms"
            animate.attrs['fill'] = "freeze"
            
            if cnt == 1:    #If this is the first animation layer
                animate.attrs['begin'] = f"0s;id-str(len(ds) - 1).end" #start the animation at 0s, and the end of the last animation(loops)
            else:
                animate.attrs['begin'] = f"id-str(cnt - 1).end"     #start the animation at the end of the previous animation
            tag.append(animate)
            
    return base

def write(output, svg):
    with open(output, "w") as file:
        file.write(str(svg))


svgs = [
        ["./seal-1.svg", 1000],
        ["./seal-2.svg", 1000],
        ["./seal-3.svg", 1000],
]
output="seal-anim.svg"

animation = group(svgs)
write(output, animation)

但是，对于更大的例子，例如this one of someone playing trombone，它有更多的层，动画几乎可以工作，但原始图像保留在背景中

这是第二个 svg 动画的 github repo 上的所有文件，以及生成它的脚本

【问题讨论】：

【参考方案1】：
    要正确地为您添加了&lt;animate&gt; 标签的&lt;path&gt;s 设置动画，您需要调整您的程序，其中cnt == 1 将fill 属性更改为"remove" 并添加一个新属性， repeatCount 设置为 "indefinite"。所以结果应该是这样的： 
<animate 
     attributeName="d" 
     begin="0s;strap2-3.end" 
     dur="1500ms" 
     fill="remove"  # switch to this value
     repeatCount="indefinite"  # add this attribute
     id="strap2-1" 
     to="M1789.22,2912.33l-83.296,2.902l45.833,1758.22l83.296,-2.901l-45.833,-1758.22Z"/>
    虽然这将修复动画，但您还有另一个问题是图像的某些部分，即 Dexter 的滑动手和完全伸展的长号，没有动画。看看我在说什么，例如删除这个&lt;path&gt;，完全扩展的长号将被清理： 
<path d="M4520.84,0.486c-23.469,6.567 -33.771,58.55 -33.771,58.55c-107.025,573.459 -2460.35,714.709 -2798.9,773.33c-537.992,93.166 -447.612,909.229 65.871,875.141c185.679,-12.325 979.017,-79.631 979.017,-79.631c-0,-0 -14.344,-104.849 50.82,-111.235c65.164,-6.387 71.763,100.733 71.763,100.733c220.525,-19.258 1289.13,-144.555 1289.13,-144.555c-7.646,-46.501 15.458,-77.667 48.895,-83.1c33.438,-5.438 67.598,17.3 74.109,72.012c494.963,-43.573 2721.5,-252.633 2966.35,-282.537c363.216,-44.363 601.066,328.762 109.12,377.417c-419.854,41.529 -4888.32,477.23 -5003.25,487.634l6.459,101.831c0,-0 4235.6,-392.165 5061.22,-462.528c673.929,-132.462 268.75,-706.75 -105.588,-634.912c-291.55,31.654 -5264.31,515.842 -5430.99,506.325c-573.14,-32.721 -365.372,-423.426 -90.792,-511.82c86.976,-28 669.863,-96.155 694.175,-98.83c685.163,-75.316 1788.48,-168.387 2127.44,237.771c24.904,29.846 73.358,16.659 78.658,-21.85c46.142,-335.116 -65.85,-927.987 -136.879,-1143.18c-3.667,-11.113 -13.617,-19.147 -22.854,-16.563Z" style="fill:url(#_Radial14);fill-rule:nonzero;"/>

您需要决定是制作动画还是删除负责 SVG 这两部分的路径，以获得最佳动画效果。

【讨论】：

我不认为 repeatCount="indefinite" 的事情会起作用，如果你想看看，我上传了另一个 svg 的工作示例 repeatCount 示例：jsfiddle.net/2aksdzmv/2 那个 jsfiddle 不是我要找的，有 4 个不同的手臂位置，因此有 4 个不同的 svg，它们应该像上面的 seal svg 一样放在一起 @Sam，上面评论中的示例 jsfiddle is 使用我在回答中提到的调整运行您的脚本，它将您在 git repo 中提供的 svg 分组. 我知道你的答案有一些调整，我是说这些调整不是我想要的效果

以上是关于使用 Beautiful soup 从多个 svg 帧创建循环 svg 动画的主要内容，如果未能解决你的问题，请参考以下文章

Python爬虫学习Beautiful Soup库

从页面中获取所有链接 Beautiful Soup

如何使用 Python 和 Beautiful Soup 从框架中抓取信息

如何使用涉及html表的Beautiful Soup从页面中抓取产品信息[关闭]

如何使用 Beautiful Soup 从 <script> 中提取内容

Python爬虫利器：Beautiful Soup