如何使用 jQuery 更改 Raphael 文本元素？

Question

我创建了一个文本元素：

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 元素内的文本属性，但不会更改我在页面上看到的文本。现在发现生成的SVG里面有一个tspan-element：

<text id="myObject" [...] text="new text"><tspan dy="3.5">myText</tspan></text>

我只能看到“myText”而不是来自文本属性的文本（“新文本”）。 如何通过 jQuery 命令更改此文本？

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