javascript - 将事件监听器添加到 svg 的动态元素

Question

我正在用 svg 开发动态圆图。对于每个部分，我添加了不同的 <use id="clone" xlink:href="#circle-small" />并设置 stroke-color , stroke-dasharray和 stroke-dashoffset .

for(var i = 0; i < chartItems.length; i++) {
  currentItem = chartItems[i];
  // create segment element
  useEl = this.createChartPart(currentItem.color);
  chartSvg.appendChild(useEl);

  useEl.setAttribute('stroke-dasharray', this.calcStrokeArr(parseFloat(currentItem.percent), 
   roundRadius)  + ' 999');

  // problem
  useEl.addEventListener('click', function() {
    // do something like add / remove class to current use el
  });

  useEl.setAttribute('id', 'use-' + i);
}

对于每个 use元素添加事件监听器，一切正常，但我在区域下方单击的地方，始终选择最后 use元素。

此代码为 createChartPart方法

createChartPart: function(color) {
  var use = document.getElementById('clone');
  var useClone = use.cloneNode(true);

  useClone.setAttribute('xlink:href', "#circle-small");
  useClone.setAttribute('stroke', color);

  return useClone;
}

我哪里错了？我想从 circle 中选择区域并更改 stroke-width

演示链接:https://jsfiddle.net/07d36Lzj/

感谢大家的帮助!如果我提出重复的问题，我很抱歉，但我的研究以失败告终。干杯!

已解决!

我改为解决问题 stroke-dashoffset我使用 svg/cirlce 属性 transform圆的每个部分的位置。当我使用 stroke-dashoffset单击事件在 chrome 上无法正常工作，但可以使用 transform点击事件正常工作。

链接到工作演示:https://jsfiddle.net/0qa94zsm/

Answer 1

确实看过你的 fiddle ，在事件监听器中将 this 替换为 event.target 确实改善了行为，但仍然不完美，因为“小圆圈”存在于大圆圈的顶部，这样它就可以捕捉到点击而不是“大圆圈”

[编辑]:点击一个大圆元素的边框，使其再次变小

无论如何，这里的 fiddle 希望能有所帮助!

https://jsfiddle.net/41e2fd9m/