如何使SVG可点击触发函数?

Question

我有一张从bootstrap中添加SVG的卡片。我想在单击SVG时更改卡片的内容。在某种程度上，我想使用svg作为按钮。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-line" viewBox="0 0 16 16" onClick={showStatHandler}>
<path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
</svg>

Answer 1

您可以通过以下操作获得SVG的侦听器

document.querySelector('svg').onclick = () => {
// do stuff
}