SVG元素是DOM节点，事件绑定与HTML类似：需用getElementById等获取元素、addEventListener监听事件、createElementNS创建动态元素，并注意pointer-events和坐标处理。
SVG元素本身就是DOM节点，绑定JavaScript事件和操作普通HTML元素几乎一样，关键在于选对元素、用对方法、注意命名空间细节。
直接使用addEventListener监听原生事件
这是最通用、兼容性最好的方式。只要SVG嵌入HTML文档（如内联<svg>），所有标准事件都可直接监听：
- 用
document.getElementById()或document.querySelectorAll()获取目标SVG元素，例如const circle = document.getElementById('data-point'); - 调用
addEventListener('click', handler)或addEventListener('mouseover', handler) - 在回调中可修改属性：
element.setAttribute('fill', '#ff6b6b')，或更新提示框文本：tooltip.textContent = element.getAttribute('data-value') - 鼠标移出时记得恢复原始状态，比如重置
r、fill或清空提示内容
用SVG.js的on()方法简化绑定
如果你引入了SVG.js库，事件绑定更简洁，支持链式调用和多事件合并：
circle.on('click', () => console.log('clicked'))rect.on('mouseover mouseout', e => { if (e.type === 'mouseover') {...} })- 它自动处理命名空间和事件委托场景，适合复杂SVG应用或需要批量操作的情况
动态创建的SVG元素必须用createElementNS
用JavaScript生成图形时，不能用document.createElement()，否则元素无法被正确渲染或响应事件：
立即学习“Java免费学习笔记（深入）”；
- 必须指定SVG命名空间：
const svgNS = "http://www.w3.org/2000/svg"; - 创建元素：
const circle = document.createElementNS(svgNS, 'circle'); - 设置属性后，再调用
addEventListener——此时它已是合法DOM节点，事件完全可用 - 常见错误：漏掉命名空间导致元素存在但不显示，或事件监听无效
注意坐标与事件穿透问题
交互效果常受视觉层级影响，特别是文字覆盖图形时：
- SVG中的
<text>默认会拦截鼠标事件，导致下方<circle>收不到mouseover - 解决方法：给text加CSS样式
pointer-events: none;，或用JS设置text.style.pointerEvents = 'none' - 拖拽类交互需记录初始偏移量，用
mousemove持续更新transform="translate(x,y)"，避免直接改x/y引发坐标计算偏差
