CODEWITHSUNDEEP
jquerysvgraphaeljquery-events
Chris
Chris

Reputation: 769

How to change Raphael text element with jQuery?

I created a text element:

var gcText = paper.text(textPosX, textPosY, "myText");
gcText.attr({"text-anchor":end});
gcText.node.id = "myObject";

After loading the page I use some JS jQuery commands for modifying some elements and I also want to update the text. I already found these posts: How to modify raphael text? and Changing text in RaphaelJS ... and tried this:

$('#myObject').attr("text","new text");

But had no luck with it! These commands change the text attribute inside the svg-text element, but not the text I can see on the page. Now I found out that there is a tspan-element inside the generated SVG:

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

I can only see the "myText" and not the text from the text-attribute ("new text"). How can a change this text through jQuery commands?

Upvotes: 0

Views: 3994

Answers (1)

Joshua
Joshua

Reputation: 3603

You should probably attempt to reference the Raphael object itself, not using jQuery. jQuery is great for DOM manipulation, with elements such as DIV, A, P, etc.

Raphael's API is much better suited for manipulating SVG.

Here is a similar question with the appropriate answer to your question:

How to modify raphael text?

Edit: Sample Rewrite of code:

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");

It doesn't EXACTLY change the text inside the SVG, rather it rewrites it. But you get the same effect.

Upvotes: 1

Related Questions