鼠标悬停SVG圆形时应用SVG遮罩的事件触发问题

尝试在鼠标进入SVG圆形时应用SVG遮罩，遮罩功能正常，但事件未触发。需要实现当<svg id="container">中的圆形被悬停时，为<rect id="masked">应用遮罩。

原代码示例 #

JavaScript #

const svg = document.getElementById('container')

svg.addEventListener('onmouseover', (e) => {
  console.log('hover')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'grey')
  masked.setAttribute('fill-opacity', '70%')
  masked.setAttribute('mask', 'url(#myMask)')
})

svg.addEventListener('onmouseleave', (e) => {
  console.log('leave')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'none')
  masked.setAttribute('fill-opacity', '100%')
  masked.removeAttribute('mask')
})

CSS #

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
}

svg,
circle {
  pointer-events: all;
}

HTML #

<svg id="mySVG" width="600" height="250">
  <mask id="myMask" x="0" y="0" width="600" height="250">
    <rect width="400" height="250" fill="white" />
    <circle cx="25" cy="25" r="25" fill="black" />
  </mask>
  <rect id="masked" x="0" y="0" width="600" height="250" fill="grey"></rect>
  <!-- 以下SVG元素用于触发事件 -->
  <svg id="container">
    <!-- 此圆形与<mask>中的圆形重叠 -->
    <circle cx="25" cy="25" r="25" fill="none" stroke="black" />
  </svg>
</svg>

解决方案 #

核心问题修正 #

1. 事件名错误：DOM事件监听不需要加on前缀，原代码中的onmouseover、onmouseleave应改为mouseover、mouseleave。
2. 监听对象优化：直接监听触发事件的圆形元素，而非父SVG容器，避免无关区域误触发事件。
3. 属性规范优化：SVG的fill-opacity建议使用小数（如0.7）而非百分比，兼容性更好。
4. 嵌套SVG尺寸补充：给<svg id="container">设置与父SVG一致的宽高，避免布局偏移导致事件区域错位。

修改后的完整代码 #

JavaScript

// 直接获取触发事件的圆形元素
const triggerCircle = document.querySelector('#container circle');
const maskedRect = document.getElementById('masked');

triggerCircle.addEventListener('mouseover', () => {
  console.log('hover');
  maskedRect.setAttribute('fill', 'grey');
  maskedRect.setAttribute('fill-opacity', '0.7');
  maskedRect.setAttribute('mask', 'url(#myMask)');
});

triggerCircle.addEventListener('mouseleave', () => {
  console.log('leave');
  maskedRect.setAttribute('fill', 'none');
  maskedRect.setAttribute('fill-opacity', '1');
  maskedRect.removeAttribute('mask');
});

HTML（仅修改container部分）

<svg id="container" width="600" height="250">
  <circle cx="25" cy="25" r="25" fill="none" stroke="black" />
</svg>

CSS部分无需修改，保持原代码即可。

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