我正在尝试使用SVG动画，在该动画中它会循环分组的元素，以便您获得逐帧动画。
我做了什么！
我在2012年碰到了this贴子，展示了如何在SMIL中执行此操作，但只有在动画只有3组又称为帧的情况下，我才能使其工作。我也尝试使用不透明度而不是显示，但是不透明度给动画带来了讨厌的闪烁效果（不确定原因）。而且我不知道如何告诉它在重复动画之前最后延迟。这是一个示例：https://jsfiddle.net/r0o459z8/
我最终制作了SVGAnimFrames，它在JS中非常有效，除非我在两个不同的SVG上两次调用它。举例来说，假设第一个向量（标头）在标头完成并要重新启动时具有比第二个（弹跳）更多的帧，则它的动画弹跳不再播放，因为计数器变量每次调用两次，并在SVGAnimFrames中被调用。我能想到的唯一方法是在iframe中运行其动画。我尝试过，但在控制台中显示错误“ [Violation] Avoid using document.write()”。
因此，我喜欢SMIL动画的想法，因此我的问题...
如何在SMIL中制作此“逐帧SVG动画”，使其可用于3个以上的帧？
如果无法播放SMIL动画，为什么？
我可以使用SVGAnimFrames做什么，我可以调用多个svg进行动画处理，并使它们的动画影响另一个（例如，标头和/或在标头完成其动画后不播放弹跳）？
body {
text-align: center;
padding: 1em;
background: rgb(71,15,89);
}<svg style="isolation:isolate" viewBox="0 0 602.64 57.24">
<g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
<animate attributeName="display" values="inline;none;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235)"></path>
<path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235)"></path>
<animate attributeName="display" values="none;inline;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235)"></path>
<path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235)"></path>
<animate attributeName="display" values="none;none;inline;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
<g>
<path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235)"></path>
<path d=" M 135.576 56.088 L 149.256 6.552 L 171.144 6.552 L 185.472 56.088 L 168.552 56.088 L 166.68 46.584 L 153.864 46.584 L 151.776 56.088 L 135.576 56.088 Z M 155.376 37.728 L 164.952 37.728 L 160.272 16.056 L 155.376 37.728 Z " fill="rgb(235,235)"></path>
<animate attributeName="display" values="none;none;none;inline;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
</g>
</svg>