我创建了一个文本元素:
var gcText = paper.text(textPosX, textPosY, "myText");
gcText.attr({"text-anchor":end});
gcText.node.id = "myObject";
加载页面后,我使用了一些JS jQuery命令来修改某些元素,我也想更新文本。我已经找到了这些帖子:How to modify raphael text?和Changing text in RaphaelJS...并尝试过:
$('#myObject').attr("text","new text");
但是没有运气!这些命令会更改svg-text元素内的text属性,但不会更改我在页面上看到的文本。现在,我发现生成的SVG中有一个tspan元素:
<text id="myObject" [...] text="new text"><tspan dy="3.5">myText</tspan></text>
我只能看到“ myText”,而看不到来自文本属性(“新文本”)的文本。如何通过jQuery命令更改此文本?
[您可能应该尝试引用Raphael对象本身,而不使用jQuery。 jQuery非常适合DOM操作,具有DIV,A,P等元素。
Raphael的API更适合于处理SVG。
这里是一个类似的问题,带有对您问题的适当答案:
编辑:示例代码重写:
function renderText(myText) {
var gcText = paper.text(textPosX, textPosY, myText).attr({"text-anchor":end});
gcText.node.id = "myObject";
}
//onload
renderText("First text to appear");
// call it second time
renderText("Second text to appear");
它并不会完全更改SVG中的文本,而是会重写它。但是您会得到相同的效果。