How to add a click event inside a shape in a SVG?

Question

In this demo below If you click on the stroke the alert is triggered, How can I make it in such a way that even if they click anywhere inside the rectangle and I alerts.

 const svg = document.querySelector('#svg'); const svgNS = svg.namespaceURI; const rect = document.createElementNS(svgNS, 'rect'); const clickedOnRect = () => { alert('Rectangle was clicked'); } rect.setAttributeNS(null, 'x', '100'); rect.setAttributeNS(null, 'y', '100'); rect.setAttributeNS(null, 'width', '100'); rect.setAttributeNS(null, 'height', '100'); rect.setAttributeNS(null, 'fill', "none"); rect.setAttributeNS(null, 'stroke', "red"); rect.setAttributeNS(null, 'stroke-width', '5'); rect.setAttributeNS(null, 'tab-index', '1'); rect.setAttributeNS(null, 'cursor', 'pointer'); rect.addEventListener('click', ($event) => { clickedOnRect(); }); svg.appendChild(rect); 

 svg { border: 1px solid #000000; } 

 <svg id='svg' width="400" height="400"> </svg> 

Answer 1

Replace none filling with the transparent one.

 const svg = document.querySelector('#svg'); const svgNS = svg.namespaceURI; const rect = document.createElementNS(svgNS, 'rect'); const clickedOnRect = () => { alert('Rectangle was clicked'); } rect.setAttributeNS(null, 'x', '100'); rect.setAttributeNS(null, 'y', '100'); rect.setAttributeNS(null, 'width', '100'); rect.setAttributeNS(null, 'height', '100'); rect.setAttributeNS(null, 'fill', "transparent"); rect.setAttributeNS(null, 'stroke', "red"); rect.setAttributeNS(null, 'stroke-width', '5'); rect.setAttributeNS(null, 'tab-index', '1'); rect.setAttributeNS(null, 'cursor', 'pointer'); rect.addEventListener('click', ($event) => { clickedOnRect(); }); svg.appendChild(rect); 

 svg { border: 1px solid #000000; } 

 <svg id='svg' width="400" height="400"> </svg>