title: Svg click events not working properly
body: <p>I am trying to make my SVGs look like a "pie shape" which appears to be all fine, besides, i want each of them to have a different click event.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function one() {
      alert("1");
  }
  function two() {
      alert("2");
  }
  function three() {
      alert("3");
  }
  function four() {
      alert("4");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="position: absolute;height:auto;width:auto;" onClick="one()"&gt;
  &lt;path d="m 25.857864,25.857865 a 20,20 0 0 1 28.284271,-1e-6 L 40,40 Z"/&gt;
  &lt;/svg&gt;
  &lt;svg style="position: absolute;height:auto;width:auto;" onClick="two()"&gt;
  &lt;path
     d="m 25.857864,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L 40,-40 Z" 
     transform="rotate(90)" /&gt;
  &lt;/svg&gt;
  &lt;svg style="position: absolute;height:auto;width:auto;" onClick="three()"&gt;
  &lt;path
     d="m -54.142136,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L -40,-40 Z" 
     transform="scale(-1)" /&gt;
  &lt;/svg&gt;
  &lt;svg style="position: absolute;height:auto;width:auto;" onClick="four()"&gt;
  &lt;path 
     d="m 25.857864,25.857865 a 20,20 0 0 1 28.284271,-1e-6 L 40,40 Z" 
     transform="matrix(0,1,1,0,0,0)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However my problem is, whenever i try, the last SVG in the code seems to be covering other SVGs in the code, such that only the last function {four() in the example} would be called out no matter which part of the circle i click on</p>