使用SVG.js选择文本元素

Question

I'm using the library SVG.js and svg.select.js to manipulate svg objects, I have problems selecting text elements as you can see in this example . With the ellipse there are no problems while this is the error message when trying to select the text: "Uncaught TypeError: this.parent.group is not a function" This is my code:

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

Where am I wrong?

Answer 1

You access the event.target.id in your event handler. The target property always points to the node the event was invoked on. In your case thats the tspan . However, what you want is the text.

svg.js calls the handler in the context of the element it was bound on. So you can simply use this to get the group and search the text-element from there:

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

However, the best way would be to bind the click event to the text at the first place so you dont need to traverse through the dom

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