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>