Javascript SVG中的圆在IE和边上旋转_Javascript_Css_Internet Explorer_Svg_Microsoft Edge

Javascript SVG中的圆在IE和边上旋转

javascript css internet-explorer svg

Javascript SVG中的圆在IE和边上旋转,javascript,css,internet-explorer,svg,microsoft-edge,Javascript,Css,Internet Explorer,Svg,Microsoft Edge,这让我抓狂，我不明白为什么一个简单的在IE和Edge上旋转180度这看起来像是浏览器的一个bug，但我不能让它这样也许你知道一个CSS黑客可以解决这个问题，因为这只是视口中CSS更新的问题证明：当你点击圆时——在IE中，不是边——它会返回到正常的旋转（但是js根本不会影响圆的旋转…）下面是演示（在底部）：与Chrome/Firefox和IE/Edge相比，你会看到很大的不同如果有人能帮助我，他就会成为我的救世主呵呵。。。实际上，我通过尝试做一个jsFiddle解决了这个问题事实上

这让我抓狂，我不明白为什么一个简单的

在IE和Edge上旋转180度

这看起来像是浏览器的一个bug，但我不能让它这样

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

证明：当你点击圆时——在IE中，不是边——它会返回到正常的旋转（但是js根本不会影响圆的旋转…）

下面是演示（在底部）：

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

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

呵呵。。。实际上，我通过尝试做一个jsFiddle解决了这个问题

事实上，IE和Edge在使用javascript更新SVG属性时遇到了问题，如果它们尚未声明（在DOM或CSS中）

我解释说：

我的DOM中有几个
元素，它们都有
```
r
```
、
```
cx
```
和
```
cy
```
属性
我直接在CSS中给它们
```
笔划
```
和
```
笔划宽度
```
然后，使用javascript更新它们的
```
笔划dasharray
```
和
```
笔划dashoffset
```

但是IE和Edge不喜欢用javascript更新这些属性，如果你一开始没有指定它们的话（天知道为什么）

因此，我的解决方案只是在

元素中添加

stroke dasharray=“0”

和

stroke dashoffset=“0”

。还有魔法！它起作用了

或者，更简单的是，我刚刚添加了

stroke-dasharray:0和行程偏移：0在我的CSS中，它也可以工作
希望它能帮助其他人。
您应该在这里设置一个代码片段，其中包含的代码最少，可以重现您的问题。这样做，你可能会得到帮助，甚至发现自己的问题来自何处。为带着解决方案回来干杯！帮助我解决了一个非常类似的问题。很高兴它帮助了你！