Javascript 类列表在MS Edge中不工作

我遇到了一个无法在svg元素上使用javascript类列表的问题

我通过以下简单的代码复制了这个问题：

html

<svg viewBox="0 0 100 100">
<circle id="circle" r="40" cx="50" cy="50"></circle>
</svg>

javascript

document.getElementById("circle").classList += "red";

JS小提琴：

我在互联网上找到了这张罚单，微软称它已被修复。对我来说似乎不是这样

添加一个类是首选的，但另一种解决方法是使用svg元素的javascript更改元素属性（如本例中的fill）

---

最后一点注意：在实际情况中，我试图触发css动画，而不是背景色。

元素类属性至少可以使用两种常用方法访问

element.className // a string

或

在其他浏览器中（至少目前是Edge除外），

element.classList+=“red”

实际上与

element.className+=“red”

相同，如果元素还没有类，这很好

但是，如果你有

<element class="blue">

使用

classList.add

方法可能就是您想要的

<element class="blue">
element.classList.add('red')
<element class="blue red">

element.classList.add（'red'）

---

还有classList.remove和classList.toggle，这使得使用类变得简单

元素类属性至少可以使用两种常用方法访问

element.className // a string

或

在其他浏览器中（至少目前是Edge除外），

element.classList+=“red”

实际上与

element.className+=“red”

相同，如果元素还没有类，这很好

但是，如果你有

<element class="blue">

使用

classList.add

方法可能就是您想要的

<element class="blue">
element.classList.add('red')
<element class="blue red">

element.classList.add（'red'）

---

还有classList.remove和classList.toggle，这使得使用类变得简单

classList不是字符串。。。您需要

document.getElementById（“圆圈”）.classList.add（'red'）。。。。在所有浏览器（不仅仅是边缘）中，您的代码在其他浏览器中都能正常工作，相当于
document.getElementById（“圆圈”）.classname+=“红色”
-但是如果元素已经有
class=“blue”
，这将导致
class=“bluered”
-使用.add，将以
class=“bluered”
@Jaromanda X Great结束！这实际上似乎解决了问题。从现在起，我将确保使用classList.add（）改进我的javascripting。把它作为正式答案放进去，我会接受的。试着分配给
className
，而不是
classList
classList不是字符串。。。您需要
document.getElementById（“圆圈”）.classList.add（'red'）。。。。在所有浏览器（不仅仅是边缘）中，您的代码在其他浏览器中都能正常工作，相当于
document.getElementById（“圆圈”）.classname+=“红色”
-但是如果元素已经有
class=“blue”
，这将导致
class=“bluered”
-使用.add，将以
class=“bluered”
@Jaromanda X Great结束！这实际上似乎解决了问题。从现在起，我将确保使用classList.add（）改进我的javascripting。把它作为正式答案放进去，我会接受的。试着分配给
className
而不是
classList