CODEWITHSUNDEEP
javascriptsvgsvg.js
ab_mundi
ab_mundi

Reputation: 53

Selecting Text element with SVG.js

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?

Upvotes: 0

Views: 1588

Answers (1)

Fuzzyma
Fuzzyma

Reputation: 8474

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

Upvotes: 2

Related Questions