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

Javascript 如何使用Snap.SVG更新SVG文本元素?,javascript,jquery,svg,snap.svg,Javascript,Jquery,Svg,Snap.svg,我使用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); } 假设我想稍后更新文本,我该怎么做

我使用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进行如下操作:

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);
}
self.selector.find(“#my_id”)[0].textContent=“New text”


然而,这感觉真的不对,我想我可能只是缺少了Snap API的一些东西。

我认为它应该像

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

将使用jquery对其进行测试

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

另一种方法是,您可以使用
Element.node
直接获取DOM节点的引用,这样您就可以乱来了

text.node.textContent = "New text";
text.node.innerHTML = "New text";
text.node.innerHTML = 'a<tspan dy="5">2</tspan>'
text.node.textContent=“新建文本”;
text.node.innerHTML=“新建文本”;
text.node.innerHTML='a2'

一两句话的解释对于将一个可能正确的答案变成一个伟大的答案大有帮助。这对我来说不起作用。但是,如果我使用
text.attr({“#text”,“我的新文本”}),然后它就工作了。这听起来不对,听起来像个bug。如果您想仔细检查,可以发布一个JSFIDLE。@Djip示例中的
'text'
var实际上可能是
tspan
元素。调用
text.parent().attr({text:'newtext'})
只会用原始文本替换整个tspan(属性和全部),因此这也不一定很好,但会确认发生了什么。