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

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

本文关键字：文本 元素 SVG 更新 何使用 Snap svg      更新时间：2023-09-26

我使用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

我认为应该像

这样简单。
text.attr({ text: 'my new text'});


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

将测试它

另一种方法，您可以使用Element.node直接获得DOM节点的引用，因此您可以随意使用

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

使用jquery

$(s.select('#id').node).text('new text');
相关文章：