MS-EdgeでclassListが動作しない

Question

svg要素でjavascriptのclassListを使用できない問題が発生しています。

私はこのコードのシンプルな作品で問題を複製さ：

HTML

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

CSS

.red{ 
    fill: red; 
} 

javascriptの

の

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

JS-フィドル：https://jsfiddle.net/gqckv029/

私は、Microsoftはそれが修正されたと述べているインターネット上でこのチケットを見つけました。 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/。それは私には当てはまらないようです。クラス追加

が好ましいが、代わりにSVG要素のジャバスクリプト有する要素属性（のようなこの場合に記入）を変更するための回避策も答えとして十分です。

最終的なメモ：現実の状況では、背景色ではなくCSSアニメーションをトリガーしようとしています。

Answer 1

エレメントのクラス属性がelement.classList += "red"が効果的に同じである、少なくとも2つの一般的な方法（少なくとも今のエッジ以外の）他のブラウザで

element.className // a string 

又は

element.classList // a "DOMTokenList" 

を使用してアクセスすることができますelement.className += "red"要素にまだクラスがない場合は問題ありません

ただし、

<element class="blue"> 

、その後classList += "red"とclassName += "red"両方が

classList.addメソッドを使用して

<element class="bluered"> 

になりますでの作業になりclassList.removeとclassList.toggleは、もありますあなたは

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

欲しいものはおそらくですクラスは簡単です