Access innerText of svg element
Hi;
I have a XML document and going to transform it as HTML by XSLT. One of the fields named "graph" consists of SVG image code. I have added an EMBED object to the output HTML as below:
[lt;]embed type='image/svg+xml' src='Image.svg' onload="this.getSVGDocument().getElementsByTagName('svg')[0].innerText = '{graph}'" /[gt;]
Image.svg is:
[lt;]?xml version="1.0" standalone="no"?[gt;]
[lt;]?xml-stylesheet href="SVG.css" type="text/css"?[gt;]
[lt;]!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[gt;]
[lt;]svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" /[gt;]
But unfortunately, I may not access the innerText or innerHTML of svg element in Image.svg; Although I can read or change the attributes of this element such as "width" or "version"!?
How would I be able to show the svg image? I am looking for a way to change the innerText of svg tag from the main HTML file.
Much obliged to you for your attention.
Regards
It sounds like you need to work with the DOM methods (createElement, appendChild), I don't think innerText is valid in the SVG DOM. Use "createSVG(this)" in your onload instead and have:
var SVGNS = "http://www.w3.org/2000/svg";
function createSVG(elem) {
var root = elem.getSVGDocument().getElementsByTagName('svg')[0];
var circ = document.createElementNS(SVGNS, "circle");
circ.setAttributeNS(null, "r", "10");
circ.setAttributeNS(null, "cx", "20");
circ.setAttributeNS(null, "cy", "20");
circ.setAttributeNS(null, "fill", "red");
root.appendChild(circ);
}
Post new comment