svgonclicksvg-rect

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

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>

Solution

  • 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>