如何获取SVG内部触发点击事件的具体元素

核心原理：绑定在SVG根元素上的点击事件通过事件冒泡触发时，事件对象的target属性会直接指向实际被点击的内部子元素，currentTarget才是绑定事件的SVG根元素，直接读取target即可。

你原代码存在变量名笔误：创建的SVG元素变量为this.svgEl，绑定事件时错误写为this.svgElement，修正后完整实现代码如下：

this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');        
var s = Snap(this.svgEl);        
var svgFromApi = (new DOMParser()).parseFromString("svg image from API", "image/svg+xml");
s.clear();
s.append(svgFromApi.documentElement);
this.divElementRef.nativeElement.appendChild(this.svgEl); 

this.svgEl.onclick = (e) => {               
    // 获取原生DOM格式的被点击元素
    const clickedElement = e.target;
    // 如果需要用Snap.svg的API操作该元素，可以转成Snap包装对象
    const clickedSnapElement = Snap(clickedElement);

    // 示例：输出元素信息验证
    console.log('点击元素标签名：', clickedElement.tagName);
    console.log('点击元素ID：', clickedElement.id);
    console.log('点击元素自定义属性：', clickedElement.getAttribute('你的自定义属性名'));
}

常见使用说明 #

• 如需只响应特定类型的SVG元素（比如仅响应路径、圆形的点击），可以加类型判断：

  if(clickedElement.tagName.toLowerCase() === 'path') {
    // 只处理path元素的点击逻辑
  }
  

• 如需获取最近的指定父元素（比如点击路径时要获取所属的组<g>），可以用closest方法：

  const parentGroup = clickedElement.closest('g');
  

• 如需阻止点击事件冒泡到SVG外层的DOM元素，可在事件回调内调用e.stopPropagation()

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