Menu
i was using raphaeljs , and i want to show html(not only text) in svg,
so i use this code :
var r = Raphael("holder", 200, 300); var t = r.text(10, 10, "ssdwqdwq"); t.node.innerHTML='dddd' but i cant change the svg's content , so i console it in firebug ,
console.log(t.node) it show this :
<text x="10" y="13.5" text-anchor="middle" style="font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000"> so how to change the text using javscript on svg
thanks
667
With jQuery, you can do it this way: Let's suppose your svgString contains your svg image after the replacing operations. $(svgString)[0] to create a svg tag corresponding to your string. Then you can append this element where you want in the dom to draw the image.
But most importantly, what's the best way to make SVG text editable? document. getElementById("element"). contentEditable = "true"; You can also use the ref contenteditable="true" in an HTML element like so: <div contenteditable="true"> .
SVG 1.2 introduces editable text fields, moving the burden of text input and editing to the user agent, which has access to system text libraries.
Like HTML, SVGs are represented using the Document Object Model (DOM) and so can be manipulated with Javascript relatively easily, especially if you are familiar with using JS with HTML. All the code examples can be found by following the Github link at the top of this post.
SVG nodes don't have a innerHTML property (they're not HTML).
Use textContent instead: t.node.textContent='dddd'
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
