如何将SVG的可点击区域限制为其visiblePainted内容？

你当前的代码给整个SVG元素绑定了点击事件，导致点击SVG的bounding box空白区域（三角形之外）也会触发颜色切换。要实现仅点击三角形本身才触发效果，有两种简单可行的方案：

方法一：将点击事件绑定到三角形元素上 #

直接把事件绑定到实际的图形元素<polygon>上，确保只有点击三角形时才触发逻辑。

修改后完整代码 #

JavaScript

const toggleFill = (element) => {
  // 获取当前填充色，兼容继承自父元素的样式
  const currentFill = element.style.fill || getComputedStyle(element).fill;
  element.style.fill = currentFill === 'silver' ? 'grey' : 'silver';
};
// 选择三角形元素而非整个SVG
const triangle = document.querySelector('polygon');
triangle.addEventListener('click', () => toggleFill(triangle));

CSS

svg {
  height: 70px;
  width: 80px;
}

HTML

<svg viewBox="0 0 90 78" style="fill: silver">
  <polygon points="0 78, 45 0, 90 78" stroke="black"/>
</svg>

方法二：通过pointer-events控制点击范围 #

让SVG元素不响应点击，仅允许内部的三角形元素接收点击事件，同时保持原有的事件绑定逻辑。

修改后完整代码 #

CSS

svg {
  height: 70px;
  width: 80px;
  /* 禁止SVG自身响应点击 */
  pointer-events: none;
}
polygon {
  /* 让三角形响应点击（默认值就是visiblePainted，可省略） */
  pointer-events: visiblePainted;
}

JavaScript

const toggleFill = (element) => {
  if (element.style.fill === 'silver') {
    element.style.fill = 'grey';
  } else {
    element.style.fill = 'silver';
  }
};
const svg = document.querySelector('svg');
svg.addEventListener('click', () => toggleFill(svg));

HTML

<svg viewBox="0 0 90 78" style="fill: silver">
  <polygon points="0 78, 45 0, 90 78" stroke="black"/>
</svg>

问题原因说明 #

之前的设置无效是因为：SVG元素的pointer-events: visiblePainted针对的是SVG自身的绘制区域，但SVG本身没有填充，其整个bounding box都属于可点击范围。而三角形<polygon>才是实际带有填充的图形元素，只有针对它设置点击逻辑，才能实现仅点击图形触发效果。

内容的提问来源于stack exchange，提问作者Altay_H