title: classList not working in MS-Edge
body: <p>I am having an issue where I cannot use javascript's classList on svg elements. </p>
  
  <p>I replicated the issue by this simple piece of code:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;svg viewBox="0 0 100 100"&gt;
  &lt;circle id="circle" r="40" cx="50" cy="50"&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.red{
    fill: red;
  }
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>document.getElementById("circle").classList += "red";
  </code></pre>
  
  <p>JS-fiddle: <a href="https://jsfiddle.net/gqckv029/" rel="nofollow noreferrer">https://jsfiddle.net/gqckv029/</a></p>
  
  <p>I found this ticket on the internet where microsoft states that it has been fixed; <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173756/</a>. That doesn't seem to be the case to me. </p>
  
  <p>Adding a class is preferred, but alternatively a workaround to change an elements attribute (like fill in this case) <strong>with javascript</strong> of an svg element would also suffice as answer.</p>
  
  <p>Final note: in the real situation I am trying to trigger a css animation, not a background color.</p>