在 SVG 或 Illustrator 中使其他图层下方的图层完全可点击

Question

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

是否还有另一个我不知道的选项，它可以让大方块的整个区域都可以点击，包括顶部小方块覆盖的区域？

Answer 1

在小方块上加上pointer-events="none"

在 SVG 或 Illustrator 中使其他图层下方的图层完全可点击

Make layer beneath other layer clickable in its entirety in SVG or Illustrator

svg

adobe-illustrator