Raphael JS:如何使用jQuery更改Raphael文本元素?

时间:2011-10-24 17:29:52

标签: jquery javascript-events svg raphael

我创建了一个文本元素:

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”,而不能看到text-attribute(“new text”)中的文本。 如何通过jQuery命令更改此文本?

BR并提前感谢, 克里斯

1 个答案:

答案 0 :(得分:1)

您应该尝试引用Raphael对象本身,而不是使用jQuery。 jQuery非常适合DOM操作,包括DIV,A,P等元素。

Raphael的API更适合操纵SVG。

以下是与您的问题的适当答案类似的问题:

How to modify raphael text?

编辑:代码重写代码:

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内部的文本,而是重写它。但是你会得到同样的效果。