How do I update an SVG text element using Snap.svg?

Question

I'm using Snap.svg to load an SVG image and add text elements to it. However, I need to be able to update the text elements as the page loads.

Right now, I'm doing something like this:

var svg = Snap("#selector");
var text;
Snap.load(path_to_file, function(f) {
    svg.append(f);
    var g = svg.select("g");
    text = g.text(x_pos, y_pos, label);
}

Let's say I want to update the text later, how do I do this? I am guaranteed to update the text object after it's been created after calling load .

The only way I've managed to modify the text is by setting an id to the element and then doing it with jQuery like this:

self.selector.find("#my_id")[0].textContent = "New text";

However, this feels really wrong and I think I might just be missing something with the Snap API.

Answer 1

I think it should be as simple as

text.attr({ text: 'my new text'});

so

setTimeout( function() { text.attr({ text: 'my new text'}) }, 2000 );

would test it

Answer 2

Another way, you can directly get a reference of DOM node using Element.node , so you can mess around

text.node.textContent = "New text";
text.node.innerHTML = "New text";
text.node.innerHTML = 'a<tspan dy="5">2</tspan>'

Answer 3

用jquery

$(s.select('#id').node).text('new text');