I have a series of shapes that I want the user to be able click anywhere on the shape to pick up as part of a drag and drop feature. All of these shapes are bounded by a rectangle.

For example:

<g id="shape1" fill="none" stroke="black">
    <rect x="0" y="0" width="100" height="100"/> 
    <circle cx="50" cy="50" r="50"/>
</g>
<g id="shape2" fill="none" stroke="black">
    <rect x="0" y="0" width="100" height="100"/> 
    <line x1="0" y1="0" x2="50" y2="100"/> 
    <line x1="100" y1="0" x2="50" y2="100"/>
</g>

I already have all of the drag and drop parts working, the problem is all of these shapes have to have fill="none" so you can see anything that may be underneath of them. This means that even though they are bounded by the rectangle, at the moment users have to physically click on one of the lines in order to pick it up instead of being able to click anywhere on the shape like I want.

My original idea was to use fill="white" and then set opacity="0" or some really low value but this applies to the stroke as well so this didn't work out.

Any ideas on how I can get this working?