如何使用Snap.svg更新SVG文本元素？

Question

我正在使用Snap.svg加載SVG圖像並向其添加文本元素。 但是，我需要能夠在頁面加載時更新文本元素。

現在，我正在做這樣的事情：

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

假設我想稍后更新文本，我該怎么做？ 我保證在調用load后創建text對象后更新它。

我設法修改文本的唯一方法是為元素設置一個id ，然后使用jQuery這樣做：

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

但是，這感覺非常錯誤，我想我可能只是缺少使用Snap API的東西。

Answer 1

我認為應該這么簡單

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

所以

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

會測試它

Answer 2

另一種方法，你可以使用Element.node直接獲取DOM節點的引用，這樣你就可以搞砸了

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