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解决了它。

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

我解释一下：

• 我在几个DOM元素<circle/>和他们都有r，cx和cy属性。
• 我给他们stroke和stroke-width直接在我的CSS。
• 然后，用javascript，我更新了他们的stroke-dasharray和stroke-dashoffset。

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

所以我的解决方案只是在<circle/>元素中添加stroke-dasharray="0"和stroke-dashoffset="0"。还有魔法！有用！

或者，甚至更简单，我只是在我的CSS中添加了stroke-dasharray: 0;和stroke-dashoffset: 0;，它也可以工作。

希望它能帮助别人。