Html 如何优化此SVG动画的性能？

我正在制作SVG动画，以查看它。它使用SVG过滤器、SVG掩码和路径动画的组合

我遇到的问题是，我正在努力让它在所有设备上都能正常运行。 在一个有坚实GPU的好桌面上，它运行良好，FPS合理。 在普通笔记本电脑上，它的速度可能为12 FPS，而在更基本的设备上，它的速度则低至2 FPS

我尝试了很多不同的方法来提高性能，包括：

• 试图消除对一个。但从我发现的情况来看，如果不重新绘制，就无法为路径设置动画
• 使用SVG动画代替CSS动画。但这让情况变得更糟
• 减少层的数量。这提高了性能，但没有完全改变美学
• 移除阴影过滤器。这提高了性能，但没有完全改变美学
• 将层移动到更分组的位置，以便仅应用一次粘性过滤器。这提高了性能，但无法在层之间保持阴影

我已经在这方面工作了很长一段时间，试图让这一效果在所有设备上以一种高性能的方式工作，如果您有任何想法，我将不胜感激：）

。全屏{
位置：固定；
顶部：0px；左侧：0px；
宽度：100%；高度：100%；
}
.svg__容器{
位置：固定；
顶部：0；左侧：0；
宽度：100%；高度：100%；
}
.svg容器{
宽度：2320px；
高度：1600px；
位置：相对位置；
顶部：50%；左侧：50%；
转换：转换（-38%，-49%）量表（0.4）；
}
.遮罩区{
填充物：白色；
}
.粘性过滤器{
过滤器：url（#粘性过滤器）；
}
.投下阴影{
过滤器：url（#放置阴影过滤器）；
不透明度：0.3；
转换：转换（30px，30px）；
}
.第1层主楼{
将改变：d；
动画：layer1-main_uuu动画15秒缓进缓出无限交替；
}
.第1层小{
将改变：d；
动画：layer1-mini___动画15秒缓进缓出无限交替；
}
1.第二层干管{
将改变：d；
动画：layer2-main_uuu动画13s缓进输出无限交替；
}
.第二层小{
将改变：d；
动画：layer2-mini___动画13s轻松输入输出无限交替；
}
.第3层{
将改变：d；
动画：第3层动画11s缓进输出无限交替；
}
.第四层{
将改变：d；
动画：layer4_uu动画9的缓进输出无限交替；
}
@关键帧第1层-主动画{
0% {
d:路径("4.297 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 9 9 9 9 9 9 9 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 19 19 19 19 19 19 19 19 19 19 19 19 19 19，6 6 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.62194，6 6 6 7 7 7 7 7 7 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 242-108.36579,32.30483-192.75592,18.56094c-84.39013，-13.74388-155.2834，-68.88713-167.102，-104.11269c-11.8186，-35.22556-18.1033，-112.09064 1.46966，-148.47019c19.57297，-36.37954 29.25438，-41.84371 56.669，-63.95345z）；
}
50% {
d:路径（“7.4141.48、37.634040404040407 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 3-81.53653,65.23166-193.97544,45.99997c-112.43892，-19.23169-178.45413，-97.54567-180.51663，-152.89318c-2.0625，-55.34751 34.94548，-68.79795 50.25015，-101.51897c15.30467，-32.72101 13.40072，-37.57542 37.76656，-65.78272z）；
}
100% {
d:路径（“9.9999995 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 5 5 5 5 5 5 9 9 9 9 9 9 995 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 5 5 5 5 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 4,69.49995-207.99983,45.99997c-134.99989、-23.49999-176.62486、-99.37494-178.68736、-148.62489c-2.0625、-49.24995 47.1406、-66.96868 62.44527、-96.03116c15.30467、-29.06248 9.74218、-41.84372 23.74217、-63.3437z”）；
}
}
@关键帧第1层-迷你动画{
0% {
d:路径（“m152.67701106.22571c18.49997，-3.37805 33.67071,11.9999935.49998,34.999997C1.82927,22.99998-17.2317,37.49997-35.49998,36.99997c-18.26828，-0.5-31.56096，-11.32925-32.56095，-33.32924c-0.9999，-21.99914.06098，-35.29265 32.56095，-.6707z”）；
}
50% {
d:path（“m69.75018,70.25011c18.49997,1.5 35.49998,11.9999935.49998,34.999997c0,22.999998-21.49999,37.49997-35.49998,36.999997c-13.99999，-0.5-33.99998，-9.49998-34.9997，-31.49997c-0.9999，-21.999916.5，-41.9997-34.9997”）；
}
100% {
d:path（“m69.75018,70.25011c18.49997,1.5 35.49998,11.9999935.49998,34.999997c0,22.999998-21.49999,37.49997-35.49998,36.999997c-13.99999，-0.5-33.99998，-9.49998-34.9997，-31.49997c-0.9999，-21.999916.5，-41.9997-34.9997”）；
}
}
@关键帧第2层-主动画{
0% {
d:路径（“4.46464646461）46464646461（1）4646461（1）4646461（1）4646461（1）46461（1）4646461-79.146 7、-66.03654（4）41414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141414141419999720.41461，-89.914569.18292，-112.28039z”）；
}
50% {
d:路径（“5.9999997 7 7.49999 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 8，-34.99997 31.99997，-76.49993 16.49999，-113.4999z”）；
}
100% {
d:路径（“m340.24996175.25003c-6.99999，-37.99997-2，-67.49995-14。