I'm making a stop button for an audio player in Illustrator.
It's basically just a small black square on top of a larger square.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="1259.7900390625px" height="430.95001220703125px" viewBox="0.07 -0.05 1259.79 430.95" enable-background="new 0.07 -0.05 1259.79 430.95" xml:space="preserve" >
<path id="stop_x5F_large" fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M589.895,244.124
c0,6.627-5.371,12-12,12h-15c-6.627,0-12-5.373-12-12v-16.024c0-6.627,5.373-12,12-12h15c6.629,0,12,5.373,12,12V244.124z"/>
<rect id="stop_x5F_small" x="562.395" y="227.975" fill="#050404" stroke="#000000" stroke-miterlimit="10" width="17" height="17"/>
</svg>
When I add this to my webpage and add javascript onclick functionality to the large square, I want the entire area of the large square to be clickable, including the area taken up by the small square.
This poses a problem as the small square is at the top level and by default covers part of the larger square, making that area unclickable.
I realize I could make the large square transparent, and then place the small square behind it, but this doesn't really work well with what I'm trying to achieve visually.
I also realize I could add the same onclick function to both squares, but again, this will cause other issues.
Is there another option which I am unaware of which makes the entire area of the large square clickable, including the area covered by the small square on top?
Add pointer-events="none" to the small square.