svg clickable shape

HTML

<svg
     id='bar'
     viewbox="0 0 600 400"
     width="600"
     height="400"
     >
    <polygon class='poly' points="0,10 150,150 300,10"  />
    <polygon class='poly' points="300,10 150,150 600,10"  />
    
</svg>

CSS

svg {
}
.poly {
    fill : rgba(255, 0, 0, 0);
    stroke-width : 1px;
    stroke: black;
}
.poly.active {
    fill : rgba(255, 0, 0, 0.5);
}

JavaScript

var poly = document.querySelector('.poly');
poly.addEventListener('click', makeSVGActive);
function makeSVGActive() {
    this.classList.toggle('active');
}