【发布时间】：2018-03-25 07:14:07
【问题描述】：
我正在 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 函数，但同样，这会导致其他问题。
是否有另一个我不知道的选项使大方块的整个区域都可以点击，包括顶部小方块覆盖的区域？
【问题讨论】：
标签： svg adobe-illustrator