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

看看您的小提琴，在事件监听器中将this替换为event.target确实改善了行为，但是仍然不完美，因为“小圆圈”位于大圆圈的顶部，因此可以抓住点击而不是“大圆圈”

[编辑]：单击大圆圈元素的边框，使其再次显得小

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

https://jsfiddle.net/41e2fd9m/

在SVG上将事件侦听器添加到动态元素

1 个答案: