There is a way in SVG to grab the shape anywhere when it fills = "none"

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

For instance:

<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 the details of the drag and drop, the problem is that all of these shapes must have fill = "none" so you can see everything that might be underneath. This means that although they are limited to a rectangle, users currently have to physically click on one of the rows to bring it up, instead of being able to click anywhere on the form as I want.

My initial idea was to use fill = "white" and then set opacity = "0" or some very low value, but that goes for the stroke as well, so it didn't work.

Any ideas on how I can get this to work?