'how i can make SVG clickable to trigger a function?

I have a card in which I've added SVG from bootstrap. I want to change the content of the card when the SVG is clicked. In a way i want to use svg as button.

<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>
reactjssvgbootstrap-5


Solution 1:[1]

you can get a listener to your SVG by doing smth like

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Florian Becker

Related Questions