Svg点击事件无法正常工作

本文介绍了Svg点击事件无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图让我的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 Ztransform =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 Ztransform =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 Ztransform =matrix（0,1,1,0 ，0,0）/>< / svg> 但是我的问题是，每当我尝试时，代码中的最后一个SVG似乎覆盖了代码中的其他SVG，这样只有最后一个函数{示例中的四（）}才会被调出，无论哪个部分我点击解决方案一个svg标签并将onClick函数分配给路径标记，这样就可以了： function one（）{alert（1）;} function two（）{alert （2）;} function three（）{alert（3）;} function four（）{alert（4）;} < svg style =position：ab solute; height：auto; width：auto;>< path d =m 25.857864,25.857865 a 20,20 0 0 1 28.284271，-1e-6 L 40,40 ZonClick =one（）/ >< path d =m 25.857864，-54.142135 a 20,20 0 0 1 28.284271，-10e-7 L 40，-40 Ztransform =rotate（90）onClick =two（）/> ;<路径d =m -54.142136，-54.142135 a 20,20 0 0 1 28.284271，-10e-7 L -40，-40 Ztransform =scale（-1）onClick =three（） /><路径d =m 25.857864,25.857865 a 20,20 0 0 1 28.284271，-1e-6 L 40,40 Ztransform =matrix（0,1,1,0,0,0） onClick =four（）/>< / svg> I am trying to make my SVGs look like a "pie shape" which appears to be all fine, besides, i want each of them to have a different click event.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>However my problem is, whenever i try, the last SVG in the code seems to be covering other SVGs in the code, such that only the last function {four() in the example} would be called out no matter which part of the circle i click on 解决方案 One svg tag and assign onClick function to 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> 这篇关于Svg点击事件无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！