Question

我使用库SVG.js和svg.select.js来操作svg对象，我在选择文本元素时遇到了问题，正如您在example中看到的那样。使用椭圆时没有问题，而这是尝试选择文本时的错误消息：＆＃34;未捕获的TypeError：this.parent.group不是函数＆＃34; 这是我的代码：

var draw = SVG('drawing')
var selectedelement;
var g = draw.group();
text = g.text('Perepepeeeee');
var myEllipse = g.ellipse(50, 50);
myEllipse.move(200, 0);

g.on("click", function (event) {
   if (selectedelement!=null)
      selectedelement.selectize(false, { deepSelect: true });
   selectedelement=SVG.get(event.target.id).selectize({ deepSelect: true })
});

我哪里错了？

Answer 1

您可以访问事件处理程序中的event.target.id。 target属性始终指向调用事件的节点。在你的情况下是tspan。但是，你想要的是文本。

svg.js在绑定的元素的上下文中调用处理程序。因此，您只需使用this获取组并从那里搜索文本元素：

g.on("click", function (event) {
   if (selectedelement!=null)
      selectedelement.selectize(false, { deepSelect: true });
   selectedelement = this.select('text').first().selectize({ deepSelect: true })
});

但是，最好的方法是将click事件绑定到第一个位置的文本，这样就不需要遍历dom

text.on("click", function (event) {
   if (selectedelement!=null)
      selectedelement.selectize(false, { deepSelect: true });
   selectedelement = this.selectize({ deepSelect: true })
});

使用SVG.js选择Text元素

1 个答案: