Safari运行SVG animateMotion动画低帧率问题排查与优化

问题现象 #

• 同一份SVG动画在Chrome/Edge、Firefox浏览器中可流畅运行，仅Mac端Safari浏览器运行时出现帧率极低的异常
• 问题SVG内包含多个animateMotion标签，path属性由大数值构成；用于复现问题的精简示例包含58个圆形元素，完整原始代码共包含200个动画对象

初始咨询方向 #

1. Safari浏览器对包含长小数部分的大数值计算性能表现如何？
2. 有哪些可行方案可以提升该SVG动画在Safari上的运行性能？

问题根因更新（供遇到同类问题的开发者参考） #

经排查已确认性能问题根因：

• 帧率低的问题并非由带小数位的大数值引发，真正诱因是组元素上配置的transform="scale(x,y)"缩放变换
• 测试环境为Safari v15.3：当缩放参数x和/或y的取值远离1时（例如本次问题场景中使用的极小缩放值），Safari的坐标计算逻辑会出现明显性能瓶颈，大数值缩放场景的性能表现暂未验证。

内容的提问来源于stack exchange，提问作者fadi