Internet explorer SVG上的动画转换在Firefox和IE中不起作用
在使用SVG路径开发动画聚光灯的过程中，我遇到了跨浏览器的问题。 我有SVG路径，一个形状覆盖整个页面，半透明，另一个形状使用“evenodd”属性屏蔽它。 然后使用jQuery我改变路径坐标和所谓的聚光灯效果。聚光灯是动画的，因为我已经为所有路径添加了过渡样式，所有的都在Chrome上工作，而不是Firefox和IE。 在Firefox和IE中，它的表现没有轻微的动画，只是跳到了新的位置 有人遇到过这种问题吗？这是一个解决办法，让这种聚光灯的工作 请单击按钮以更改形状Internet explorer SVG上的动画转换在Firefox和IE中不起作用,internet-explorer,firefox,svg,transition,mask,Internet Explorer,Firefox,Svg,Transition,Mask,在使用SVG路径开发动画聚光灯的过程中，我遇到了跨浏览器的问题。 我有SVG路径，一个形状覆盖整个页面，半透明，另一个形状使用“evenodd”属性屏蔽它。 然后使用jQuery我改变路径坐标和所谓的聚光灯效果。聚光灯是动画的，因为我已经为所有路径添加了过渡样式，所有的都在Chrome上工作，而不是Firefox和IE。 在Firefox和IE中，它的表现没有轻微的动画，只是跳到了新的位置 有人遇到过这种问题吗？这是一个解决办法，让这种聚光灯的工作 请单击按钮以更改形状 $（“#mod”）。单
$（“#mod”）。单击（函数（）{
美元（“.cls-1”）.attr（“d”，“M0,0 V1000 H1600 V0 M100100 h200 a20,20 0 0 1 20,20 v200 a20,20 h-200 a20,20 0 0 1-20，-20 v-200 a20,20 0 0 1-20 z”）；
})
$（“#cir”）。单击（函数（）{
美元（“.cls-1”）.attr（“d”、“M0,0 V1000 H1600 V0 M400100 h100 A200200 0 1 200200 V0 A200200 0 1-200200 h0 A200200 0 1-200，-200 V0 A200200 0 0 0 1 200，-200 z”）；
})
$（“#tomenu”）。单击（函数（）{
$（“.cls-1”）.attr（“d”，“M0,0 V1000 H1600 V0 M”+$（“.menu”）.position（）.left+”，“+$（.menu”）.position（）.top+“h”+$（.menu”）.width（）+“a0,0,0,0 v”+$（.menu”）.height（）+“a0,0,0,0 h-”+$（“+$（.menu”）.width（）+“a0,0,0,0,0 v-”（.menu”）.height（）+“a0,0,0 0,0 0,0.01”）；
})正文{
背景：#FFFFFF url(http://vahramtorosyan.com/reps/pexels-photo-356056.jpeg)不重复；
填充：0px；
边际：0px；
背景尺寸：封面
}
路径、圆、线{
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
}
.菜单{
宽度：200px；
高度：1500px；
位置：绝对位置；
z指数：9001；
}
.街区{
宽度：220px；
高度：1500px；
位置：绝对位置；
z指数：9000；
}
梅因迪夫先生{
宽度：100%；
身高：100%；
z指数：9999；
}
.cls-1{填充：#0c78bf；填充不透明度：.8}
测试SVG
形状1
形状2
形状3