Question

我试图让我的SVG看起来像一个“馅饼形状”，看起来一切都很好，此外，我希望他们每个人都有不同的点击事件。

cardImages

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

然而我的问题是，无论何时我尝试，代码中的最后一个SVG似乎都覆盖了代码中的其他SVG，这样无论哪个部分只调用最后一个函数{four（）}我点击的圈子

Answer 1

一个svg标记，并将onClick函数分配给路径标记，就像这样，它工作正常：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Svg点击事件无法正常工作

1 个答案: