问题
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.
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
回答1:
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.
来源：https://stackoverflow.com/questions/17949547/svg-path-pointer-events-click-detection