Javascript 为什么SVG路径的某些功能在Safari中不起作用（使用jQuery+；演示）？

我正在用jQuery播放SVG填充动画。但是我发现了一些很奇怪的事情

所以我创建了一个演示，里面有4个按钮。这些按钮旨在：

直接填充SVG路径。这在Chrome和Safari中都非常有效

用动画填充SVG路径。这在Chrome中有效，但在Safari中无效

用从颜色A到颜色B的动画填充SVG路径。这不起作用

将SVG路径从不透明度值0设置为1。就像#2一样，这在Chrome中可以工作，但在Safari中不能

我做了一些研究，但还是很困惑。尤其是两种浏览器的情况不同。我所知道的是

使用xlink:href

的东西可能会带来痛苦。但我必须使用它，因为它是一种非常好的方法，可以重复使用相同的图形来保存大小。所以我创建了这个演示，希望能得到一些基本的教程或解决我的困惑

上述所有问题在以下代码中解释：

var raw_svg=$（'#svg_holder'）.html（）；
$（'#plan1'）。单击（函数（）{
$（'#svg_holder'）.empty（）.html（原始svg）；
var$path=$（'svg'）.find（'test'）.find（'path'）；
$path.css（'fill'，'#f00'）；
});
$（'#plan2'）。单击（函数（）{
var$path=$（'svg'）.find（'test'）.find（'path'）；
$path.css（'fill'，'#00f'）；
$path.css（'transition'，'5s'）；
});
$（'#plan3'）。单击（函数（）{
$（'#svg_holder'）.empty（）.html（原始svg）；
var$path=$（'svg'）.find（'test'）.find（'path'）；
$path.css（'fill'，'#f00'）；
$path.css（'transition'，'5s'）；
$path.css（'fill'，'#00f'）；
});
$（'#plan4'）。单击（函数（）{
$（'#svg_holder'）.empty（）.html（原始svg）；
var$path=$（'svg'）.find（'test'）.find（'path'）；
$path.hide（）；
$path.css（'fill'，'#f00'）；
$path.show（5000）；
});

1-直接填充至#f00
2-使用CSS转换将动画设置为#00f
3-使用CSS转换从#f00设置动画到#00f
4-从不透明度0设置动画到1
问题：


为什么从0到1的动画在Chrome中有效，而在Safari中无效？


为什么“按钮2”在Chrome中不起作用而在Safari中不起作用


为什么“按钮3”不作为过渡而“按钮2”作为过渡？

第三个路径不起作用，因为在将路径更改为蓝色之前，您没有给浏览器使路径变为红色的机会。在那里放一个
setTimeout（）
或其他东西：。“我现在无法访问Safari，所以我无法帮助您回答这些问题。”PaulLeBeau，谢谢。Safari对我来说很重要，因为iOS也有同样的效果