将事件侦听器添加到 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 click 事件在 chrome 上无法正常工作，但transform click 事件正常工作。

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

Answer 1

确实查看了您的小提琴，在事件侦听器中将 this 替换为 event.target 确实改善了行为，但仍然不完美，因为“小圆圈”存在于大圆圈之上，因此它可以代替点击“大圈子”

[编辑]：点击一个大圆圈元素的边框，让它看起来又小了

无论如何，这里的小提琴希望可以提供帮助！

https://jsfiddle.net/41e2fd9m/