Unable to change class name of SVG element
<p>I want to change the class applied on an SVG with the click of a button. The code is <a href="http://jsfiddle.net/p19rnmev/" rel="noreferrer">here</a> . </p>

<p>My SVG looks like:</p>

<pre><code>&lt;svg id="test" class="fill" xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" &gt;
      &lt;path id="path22276" d="m500 81c-41-6-110-35-110-46 0-6 32 6 48 19 8 5 53 12 101 14 78 4 93 1 144-22 32-14 60-26 64-26 8 0-37 34-62 47-28 15-131 22-185 14z"/&gt;
&lt;/svg&gt;
</code></pre>

<p>I tried both the below code :</p>

<pre><code>  document.getElementById("test").className = "halffill";
  document.querySelector("svg.fill").setAttribute("class","halffill");
</code></pre>

<p>I tested the same javascript code against a normal div tag. It worked fine. Is there some restriction on SVG? Please help me figure this out. </p>