HTMl+SVG+JavaScript: change text at runtime?
I am about to migrate a few Flash-based applications to HTML+JavaScript+SVG (the single target rendering engine is Webkit).
I'm completely new to SVG and I'd like to know if I can use a SVG as a template image to fill the screen and change contained text on the fly from the JavaScript code embedded in the HTML page.
What I want to do is: draw the basic structure of the page in Inkscape (with some graphics and text placeholders) and then just display the SVG in the HTML page and fill the text placeholders via JavaScript.
I could get the same result by displaying a static SVG image in the background and place some absolutely positioned DIVs on top of it to display the text, but I'd like to design the position, size and style of the text labels from within Inkscape.
Can this be done? How?
I'm using the Prototype framework, not JQuery.
Answer
Try jQuery. Set manually an ID to an SVG-TextNode, and then try:
$("#my_id").textContent = "new Value";
May be it works. Otherwise try:
document.getElementById("my_id").textContent = "new Value";