在SVG或Illustrator中，使另一层下的层完全可单击

我正在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函数，但这同样会导致其他问题

---

是否还有另一个我不知道的选项，可以单击大正方形的整个区域，包括顶部小正方形覆盖的区域？

Add=“none”到小正方形。

谢谢，非常感谢