javascript - 如何使用 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);
}

假设我想稍后更新文本，我该怎么做？我保证text在调用load.

我设法修改文本的唯一方法是设置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

另一种方式，你可以直接使用 DOM 节点的引用Element.node，这样你就可以乱来了

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