我正在为Illustrator中的音频播放器制作一个停止按钮。
它基本上只是一个较大的正方形顶部的小黑方块。
<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>
当我将此添加到我的网页并将javascript onclick功能添加到大方块时，我希望大方块的整个区域都是可点击的，包括小方块占用的区域。
这会产生一个问题，因为小方块位于顶层，默认情况下覆盖较大方块的一部分，使该区域无法点击。
我意识到我可以让大方块透明，然后将小方块放在它后面，但这对我想要在视觉上实现的效果并不是很好。
我也意识到我可以为两个方块添加相同的onclick功能，但同样，这将导致其他问题。
还有其他选项，我不知道哪个可以使大方块的整个区域可点击，包括顶部的小方块覆盖的区域？