SVG 内嵌元素的鼠标事件为何不触发

用 object 载入的 SVG，内部元素绑定鼠标进入事件没有反应。原因有两层：绑定时机早于文档加载完成，以及事件需要绑在内部文档的节点上。

取到内部文档

const obj = document.querySelector('object');
obj.addEventListener('load', () => {
  const doc = obj.contentDocument;
  const node = doc.querySelector('#part');
  node.addEventListener('mouseenter', handler);
});

必须等载入完成之后再访问内部文档。提前访问得到的是空文档，选择器返回空值，绑定静默失败。

同源限制

跨域载入的 SVG 拿不到内部文档，contentDocument 为空。改用内联 SVG，或由同源接口提供文件。

光标样式

内部文档的样式不受外层样式表影响。要在内部元素上改光标，需要把样式写进 SVG 文件，或由脚本在内部文档里插入样式节点。

const style = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
style.textContent = '#part { cursor: pointer; }';
doc.documentElement.appendChild(style);

事件类型选择

需要统一处理多个内部元素时，把监听绑在内部文档的根节点上，用 mouseover 配合事件目标判断。