CODEWITHSUNDEEP
javascriptsvgsnap.svg
user513788
user513788

Reputation: 103

How SVG is drawn in HTML

Good day,

I was playing around with SVG, when I noticed this behaviour.

Background: I was loading the SVG using snap.svg. The node I wanted to replace was inside a group <g> node.

I selected an SVG node using document.getElementById. Then I got the parent. Then I replaced the textContent property of the parent with another set of SVG text. However, the new SVG was not visible.

I opened the developer tools in google chrome. I selected the same node in the node tree view. I edited the node as HTML, replacing all SVG nodes with the new SVG text. However, the new SVG was not visible.

Lastly, I selected the root element, the SVG tag itself. Then edited the SVG tag as HTML, appending the SVG text as the last child element. Now the new SVG was visible?

Are there SVG drawing rules that I should be aware of? I've read in other questions that it's hard/impossible to replace SVG text the save way HTML can be replaced by using node.innerHTML.

Upvotes: 1

Views: 156

Answers (2)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60996

Have you looked at using Element.innerSVG which is provided by Snap.svg?

Also, Element.innerHTML should work on svg elements too, and it already does work in some browsers (e.g newer versions of Opera and Chrome, see here). This is defined in the DOM Parsing spec.

Upvotes: 1

jacquard
jacquard

Reputation: 1307

You should try creating the SVG elements with the namespace aware createElementNS API. For an example, see http://www.kevlindev.com/tutorials/basics/shapes/js_dom/

Upvotes: 0

Related Questions