svg - 如何在 SVG 的形状内添加点击事件？

Question

在下面的这个演示中，如果单击笔划会触发警报，我怎样才能做到即使他们单击矩形内的任何位置，我也会发出警报。

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

用那个替换none填充物transparent。

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>