Svg click events not working properly

Question

I am trying to make my SVG look like a “cake shape”, which seems to be all right, besides, I want each of them to have a different click.

function one() {
    alert("1");
}
function two() {
    alert("2");
}
function three() {
    alert("3");
}
function four() {
    alert("4");
}

<svg style="position: absolute;height:auto;width:auto;" onClick="one()">
<path d="m 25.857864,25.857865 a 20,20 0 0 1 28.284271,-1e-6 L 40,40 Z"/>
</svg>
<svg style="position: absolute;height:auto;width:auto;" onClick="two()">
<path
   d="m 25.857864,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L 40,-40 Z" 
   transform="rotate(90)" />
</svg>
<svg style="position: absolute;height:auto;width:auto;" onClick="three()">
<path
   d="m -54.142136,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L -40,-40 Z" 
   transform="scale(-1)" />
</svg>
<svg style="position: absolute;height:auto;width:auto;" onClick="four()">
<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)"/>
</svg>

Run codeHide result

However, my problem is that whenever I try, the last SVG in the code seems to span the other SVGs in the code, so that only the last function {four () in the example} will be called no matter which part of the circle I Press

Answer 1

One svg tag and assign the onClick function to the path tag like this and it works fine:

function one() {
    alert("1");
}
function two() {
    alert("2");
}
function three() {
    alert("3");
}
function four() {
    alert("4");
}

<svg style="position: absolute;height:auto;width:auto;">
<path d="m 25.857864,25.857865 a 20,20 0 0 1 28.284271,-1e-6 L 40,40 Z" onClick="one()"/>
<path
   d="m 25.857864,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L 40,-40 Z" 
   transform="rotate(90)" onClick="two()"/>
<path
   d="m -54.142136,-54.142135 a 20,20 0 0 1 28.284271,-10e-7 L -40,-40 Z" 
   transform="scale(-1)" onClick="three()" />

<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)" onClick="four()"/>
</svg>

Run codeHide result