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的代碼似乎在被覆蓋的其他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>