svg点击事件不灵敏之解决方案

概述用svg画了个下面的chart图上图红框中的东西是如下代码&ltg class="scroll-tip right show" transform="translate(747,125)"&gt&ltpre name="code" class="html"&gt&ltrect width="30" height="30

用svg画了个下面的chart图

上图红框中的东西是以下代码

<g class="scroll-tip right show" transform="translate(747,125)"><pre name="code" class="HTML"><rect wIDth="30" height="30" x="⑸" y="⑸" class="scroll-area"></rect>

<g transform="scale(0.015,0.015)"><path d="M595 576q0 ⑴3 ⑴0 ⑵3l⑷66 ⑷66q⑴0 ⑴0 ⑵3 ⑴0t⑵3 10l⑸0 50q⑴0 10 ⑴0 23t10 23l393 393l⑶93 393q⑴0 10 ⑴0 23t10 23l50 50q10 10 23 10t23 ⑴0l466 ⑷66q10 ⑴0 10 ⑵3z"></path></g><g transform="translate(8,0) scale(0.015,0.015)"><path d="M595 576q0 ⑴3 ⑴0 ⑵3l⑷66 ⑷66q⑴0 ⑴0 ⑵3 ⑴0t⑵3 10l⑸0 50q⑴0 10 ⑴0 23t10 23l393 393l⑶93 393q⑴0 10 ⑴0 23t10 23l50 50q10 10 23 10t23 ⑴0l466 ⑷66q10 ⑴0 10 ⑵3z"></path></g></g>
简单而言 就是画了个矩形框和两个路径，矩形框是为了可选择的范围更大点，两个路径就是图中的两条折线。

问题：click事件不灵敏， 偶尔能触发 偶尔点不动。

进程：

1开始没有矩形，我在两条折线上注册了click事件，但是发现只有点击到细线上才能触发click，所以我加了个矩形框让选择的范围变大，并设置

.scroll-area { fill: transparent; cursor: pointer;}
让鼠标移动到矩形上变手形而且填充为透明 这样才不会盖住两条折线，注意fill不能设置成none，这样矩形区域就相当于不存在了，鼠标移上去没有任何效果。

解决了范围问题，但是奇怪的是偶尔点击能触发click事件偶尔不能，我想是否是层次的关系还是甚么，但是应当没遮到吧，由于鼠标移上去是变成手形了。百思不得姐。

后来我把顺序改变了下，把矩形放在两条折线后面：

<g class="scroll-tip right show" transform="translate(747,125)"><g transform="scale(0.015,0.015)"><path d="M595 576q0 ⑴3 ⑴0 ⑵3l⑷66 ⑷66q⑴0 ⑴0 ⑵3 ⑴0t⑵3 10l⑸0 50q⑴0 10 ⑴0 23t10 23l393 393l⑶93 393q⑴0 10 ⑴0 23t10 23l50 50q10 10 23 10t23 ⑴0l466 ⑷66q10 ⑴0 10 ⑵3z"></path></g><pre name="code" class="HTML"><rect wIDth="30" height="30" x="⑸" y="⑸" class="scroll-area"></rect>

</g>

妹啊，终究灵敏了 ，现在只要鼠标变成手形，点击必有效。

svg刚玩，这个和div还不同，本想用z-index设置，但是svg里好像没这个东西，顺序直接决定了谁在上谁在下，如果想主动改变，有个toFront()方法。

总结

以上是内存溢出为你收集整理的svg点击事件不灵敏之解决方案全部内容，希望文章能够帮你解决svg点击事件不灵敏之解决方案所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。