Svgのクリックイベントが正しく動作しない

Question

SVGを「円の形」のように見せようとしていますが、これはすべて素晴らしいと思われます。また、それぞれに別々のクリックイベントが必要です。私がしようとするたびに

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>

は、しかし、私の問題は、コードの最後のSVGはで、コードの中で、このような唯一の最後の関数{4を（）他のSVGsを覆っているように思われます例は}私は

Answer 1

ひとつのSVGタグをクリックすると、次のようにパスタグにonClickの機能を割り当てた円の一部に関係なく呼び出されないであろうし、それが正常に動作します：

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>