使用SVG.js選擇文本元素

Question

我正在使用庫SVG.js和svg.select.js來處理svg對象，在選擇文本元素時遇到了問題，如本例所示 。 使用橢圓沒有問題，而這是嘗試選擇文本時的錯誤消息：“未捕獲的TypeError：this.parent.group不是函數”這是我的代碼：

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