JavaScript And SVG: How Do You Increase The Clickable Area For An OnClick Event?

My script draws lines on the screen at a stroke-width of 3. The size of lines are ideal (visually) but they aren't very easy to click. As a rough example: Is there a simple way to

Solution 1:

For each line, try drawing a transparent line on top of it with a larger stroke width, and set the onclick on that.

Solution 2:

A variation on the above answer. For a cool selection effect group each thin line and transparent line combo in a group with the thin line on top. Set the onclick to the group and then animate the transparency of the thick line in your onclick.