跨浏览器SVG仪表盘组件渲染不一致问题及后续技术疑问

问题描述 #

我开发的SVG仪表盘组件通过渐变填充和旋转指针展示进度，在Chrome中所有内容渲染正确，但在Safari和Firefox中样式显示异常，进度与指针旋转均未按预期生效。

已尝试的解决方案 #

• 调整transform-box和transform-origin CSS属性；
• 修改SVG结构并通过JavaScript计算路径。

当前进展 #

正如@RobertLongson所说，“Firefox目前尚不支持在clipPath元素上使用transform-origin”
我通过将transform属性直接应用到path元素，解决了原有渲染错误的问题。

疑问 #

1. 这种直接给path元素应用transform的处理方式是否可取？
2. path元素的过渡动画在Firefox和Safari中无法生效，可能是什么原因？这属于浏览器Bug吗？

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