clicking a svg line its hard to hit,any ideas how to put a click area around a line [duplicate]

Question

I have a SVG Drawing, I want to click the lines on it. That works fine, if you hit the sometimes realy thin guy.

Does anybody have an idea, how to make the line clicking easier - without just enlarging "stroke-width"?

I tried using two lines (one white thicker one black thin), but then the rendering order destroys parts of the drawing.

any idea?

Answer 1

Draw two lines, one the one you want to see and another thicker i.e. with a stroke-width but with visibility="hidden" and then treat clicks on the hidden line as clicks on the visible line. You may need to adjust the pointer-events property to disable it for the visible line (pointer-events="none") and enable it for the hidden line (pointer-events="all")

Answer 2

one simple trick (in addition to above) is, use an other cursor in css of this element, eg: 'pointer', so your cusomers get a chance to "feel" if they are "above" the line