Javascript 将事件侦听器添加到svg的动态元素

我正在用svg开发动态圆图。对于每个片段，我都添加了不同的内容

并设置

笔划颜色

，

笔划dasharray

和

笔划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);
}

我哪里错了？我想从

圆圈中选择区域

并更改

笔划宽度

链接到演示：

谢谢你的帮助！如果我问了一个复杂的问题，我很抱歉，但我的研究以失败告终。干杯

解决了

我用svg/cirlce属性

transform

来表示圆的每个部分的位置。当我使用

stroke dashoffset

click event not work correct at chrome，但使用

transform

click event work correct时

---

链接到工作演示：

确实查看了您的小提琴，将

此

替换为

事件。事件侦听器中的目标

确实改善了行为，但仍然不完美，因为“小圆圈”位于大圆圈之上，因此它可以捕捉到点击而不是“大圆圈”

[编辑]：单击大圆元素的边框，使其看起来再次变小

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

---

感谢@MI53RE的帮助，但问题来自chrome，当使用

stroke dashoffset

click events（单击事件）渲染元素时无法更正。感谢您的反馈，您当时找到工作区了吗？或者到目前为止没有选择？

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;
}