title: How to use z-index in svg elements?
body: <p>I'm using the svg circles in my project like this,</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"&gt;
      &lt;g&gt;
          &lt;g id="one"&gt;
              &lt;circle fill="green" cx="100" cy="105" r="20" /&gt;
          &lt;/g&gt;
          &lt;g id="two"&gt;
              &lt;circle fill="orange" cx="100" cy="95" r="20" /&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And I'm using the z-index in the <code>g</code> tag to show the elements the first. In my project I need to use only z-index value, but I can't use the z-index to my svg elements. I have googled a lot but I didn't find anything relatively.
  So please help me to use z-index in my svg.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/hu2pk/2/" rel="noreferrer">DEMO.</a></p>