使用 SVG.js 选择文本元素

Question

我正在使用库 SVG.js 和 svg.select.js 来操作 svg 对象，我在 selecting 文本元素时遇到问题，如您在此 example 中所见。使用椭圆没有问题，而这是尝试 select 文本时的错误消息："Uncaught TypeError: this.parent.group is not a function" 这是我的代码：

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。目标属性始终指向调用事件的节点。在你的例子中就是 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 })
});

但是，最好的方法是首先将点击事件绑定到文本，这样就不需要遍历 dom

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

使用 SVG.js 选择文本元素

Selecting Text element with SVG.js

javascript

svg

svg.js