SVG中的圆圈在IE和Edge上旋转

Question

这让我很生气，我无法理解为什么简单的<circle/>在IE和Edge上以180度旋转。

它看起来像是浏览器的错误，但我不能这样说。

也许您知道一个可以解决问题的CSS黑客，因为这只是视口中CSS更新的问题。

证明：当你点击圆圈时 - 在IE中，而不是边缘 - 它会返回到正常旋转（但是js不会影响圆圈的所有旋转......）

这是演示（在底部）：http://charraire.dev.adelios.fr/notre-organisation/

与Chrome / Firefox和IE / Edge相比，你会看到很大的不同。

如果有人能帮助我，他就会成为我的救世主！

Answer 1

呵呵......其实我是通过尝试做一个jsFiddle来解决它的。

事实上，如果尚未声明（在DOM或CSS中），IE和Edge无法使用javascript更新SVG属性。

我自己解释一下：

• 我的DOM中有多个<circle/>元素，它们都有r，cx和cy属性。
• 我直接在我的CSS中提供stroke和stroke-width。
• 然后，使用javascript，我会更新他们的stroke-dasharray和stroke-dashoffset。

但IE和Edge不喜欢用javascript更新这些属性如果你没有在第一个地方指定它们（天知道为什么）。

所以我的解决方案就是在stroke-dasharray="0"元素中添加stroke-dashoffset="0"和<circle/>。而魔术！它有效！

或者，甚至更简单，我刚刚在我的CSS中添加了stroke-dasharray: 0;和stroke-dashoffset: 0;，它也有效。

希望它会帮助别人。