text node has text but won't render

[Greg]

This renders in Firefox perfectly well but the text in the red box remains
invisible. The program is a subset of a larger and doesn't do much. but
even after cutting out all the unneccessary stuf, I still can't get it to
work!!

Cheers,

Greg
===================
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" >
<xhtml:head>
<xhtml:title>
Intermingled XHTML and SVG
</xhtml:title>
<xhtml:script type="text/javascript" language="JavaScript"><![CDATA[
function gogo(evt){
var targetObj = evt.target; //The object that received the event
var targetDoc = targetObj.ownerDocument; //Owner document var wg =
document.getElementById("SVGroot"); var lg =
document.getElementById("labelz"); //label
labelBox= targetDoc.createElementNS("http://www.w3.org/2000/svg",
"svg:rect"); labelBox.setAttributeNS(null, "id", "label1");
labelBox.setAttributeNS(null, "fill", "red");
labelBox.setAttributeNS(null, "fill-opacity", 1);
labelBox.setAttributeNS(null, "x", 700); labelBox.setAttributeNS(null,
"y", 400); labelBox.setAttributeNS(null, "width", 200);
labelBox.setAttributeNS(null, "height", 20);
labelBox.setAttributeNS(null, "visibility", "visible");
lg.appendChild(labelBox);

labelText = targetDoc.createElementNS("http://www.w3.org/2000/svg",
"svg:text"); labelText.setAttributeNS(null, "id", "labelText1");
labelText.setAttributeNS(null, "x", "5");
labelText.setAttributeNS(null, "y", "5");
labelText.setAttributeNS(null, "style", "font-size:16px;
font-weight:normal; font-family:arial serif; fill:#000000;
fill-opacity:1; opacity:1"); labelBox.appendChild(labelText);

textSpan = targetDoc.createElementNS("http://www.w3.org/2000/svg",
"svg:tspan"); textSpan.setAttributeNS(null, "id", "tspan01");
textSpan.setAttributeNS(null, "x", "5"); textSpan.setAttributeNS(null,
"y", "5"); textSpan.setAttributeNS(null, "style", "font-size:16px;
font-weight:normal; font-family:arial serif; fill:#000000;
fill-opacity:1; opacity:1"); labelText.appendChild(textSpan);

lblTxt = targetDoc.createTextNode("this text has just been created");
textSpan.appendChild(lblTxt);
document.getElementById("tspan01").firstChild.text Content = "this text
has just been updated";
}

function hh(evt){
var thisObj = evt.target;
labelText = thisObj.getAttributeNS(null, "owner");
document.getElementById("tspan01").firstChild.text Content = labelText;

}
]]></xhtml:script>
</xhtml:head>
<xhtml:body >

<svg:svg width="1024px" height="768px" viewbox="0 0 1024 768"
onload="gogo(evt);" id="SVG_diag" xmlns:diag="http://www.diag.com/" >
<svg:g id="SVGroot">

</svg:g>
<svg:g id="labelz">

</svg:g>
</svg:svg>

</xhtml:body>
</xhtml:html>

[Martin Honnen]

Greg wrote:

This renders in Firefox perfectly well but the text in the red box remains
invisible. The program is a subset of a larger and doesn't do much.

You misunderstand the structure of SVG documents, it is rather flat,
only svg or g elements are container elements of other shapes or text
but your SVG text element does not belong as a child into the SVG rect
element.
So put the SVG text element as a child in an SVG svg element or SVG g
element.

--

Martin Honnen
http://JavaScript.FAQTs.com/