svg 路径指针事件 - 单击检测 [英] svg path pointer-events - click detection

问题描述

我正在编写一些 HTML，以便我可以使用 HTML SVG 和 PATH 标签绘制贝塞尔曲线.我的曲线非常好，现在我想添加一个功能，如果用户将鼠标悬停在曲线上，我会改变颜色.但是发生的事情是 SVG 创建了一个包含路径的大框并捕获所有点击.它基本上挡住了它下面的所有东西，即使是在不存在路径的区域.想象一下，路径从左下角到右上角，有人点击左上角(它是空的，但我有一个按钮).该点击未通过.

I'm writing some HTML so that I can draw a Bezier curve using the HTML SVG and PATH tags. My curve comes out really nice and now I want to add a capability where if a user hovers his/her mouse over the curve I change the color. What's happening though is that the SVG creates a large box that contains the path and it catches all clicks. It's essentially blocking everything underneath it, even in areas where the path is not present. Imagine that the path goes from the bottom left corner to the top right corner and someone clicks in the top left corner (where it's empty but I have a button). That click doesn't go through.

我意识到在 CSS 中我可以添加一个 pointer-events: none;行，这使我可以完全单击 SVG，但这会完全禁用 SVG.

I realized that in CSS I can add a pointer-events: none; line and that allows me to click through the SVG altogether but that disables the SVG completely.

所以问题是，有没有一种方法可以让我获得一条路径(具有大笔画宽度)来捕捉点击并允许点击通过路径不存在的区域?

So the question is, is there a way that I can get a path (with a large stroke width) to catch clicks and allow clicks to go through in areas where the path is not present?

mj

推荐答案

我遇到了类似的问题，我的路径的空白部分阻塞并阻止了其下方的 SVG 元素悬停，即使在路径不存在的部分.我通过为 fill CSS 属性指定 none 并删除了 fill-opacity 属性来解决它.所以试试这个，希望它会有所帮助.

I had a similar issue where the empty section of my path was blocking and preventing hover of SVG elements underneath it, even in the section where the path was not present. I resolved it by specifying none for the fill CSS attribute and also removed the fill-opacity attribute. So try this, hopefully it will help.

这篇关于svg 路径指针事件 - 单击检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！