insert E4X XML tree inside existing DOM tree

[Joris Gillis]

Hi all,

I've just discovered EcmaScript for Xml and I'm trying to play with it in
Firefox 1.5

In the SVG document below, an E4X XML tree is built up from scratch and
put inside the variable 'fresh'.
Any attempt, however, to append this fresh tree to the existing SVG DOM
tree seems to fail, possibly because there's a document mismatch. I don't
know how to solve it, though...

Another issue I have, is the apparent impossibility to build an E4X tree
from the existing DOM via 'XML(doc)'.

Any ideas how to fix it?

Thanks in advance.


My file looks like this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="12cm" viewBox="-100 -100 400 400"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="draw(evt)">
<desc>SVG fractal</desc>

<script type="text/ecmascript; e4x=1"> <![CDATA[
var blueprint;
var components;
var doc;
var super;
var svgns="http://www.w3.org/2000/svg";
var xlinkns="http://www.w3.org/1999/xlink";

var svg = new Namespace("http://www.w3.org/2000/svg");
var xlink = new Namespace ("http://www.w3.org/1999/xlink");

var limit=1;

function draw(evt) {
var svg = evt.target;
doc=svg.ownerDocument;
blueprint=doc.getElementById("blueprint");
super=doc.getElementById("super");
components=blueprint.getElementsByTagName("use");
components=[components.item(0),components.item(1),components.item(2)];
XML(document.t);

var fresh=<g>{frac(0)}</g>;

alert(fresh);
//XML(document);
//document.write(doc);
document.getElementsByTagName("svg")[0].appendChild(fresh);
//alert(XML(doc,document));
}

function frac(depth) {
if (depth <limit) {
ret=new XML();
for each (comp in components) {
ret+=<g
transform={comp.getAttribute("transform")?comp.getAttribute("transform"):""}>
<svg viewBox="-15 -37 192 287" width="100" height="200"
preserveAspectRatio="none">
{frac(depth+1)}
</svg>
</g>;
}
return ret;
} else {
return <use xlink:href="#blueprint"
xmlns:xlink="http://www.w3.org/1999/xlink"/>;
}
}

]]> </script>

<defs>
<rect id="super" x="0" y="0" width="100" height="200" fill="gray"
stroke-width="3px"/>
<g id="blueprint" viewBox="0 0 200 100">
<use xlink:href="#super" stroke="blue" />
<use xlink:href="#super" stroke="red" transform="scale(0.5) rotate(30)
translate(200 200)"/>
<use xlink:href="#super" stroke="green" transform="scale(0.7)
rotate(90) translate(-50 -250)"/>
</g>
</defs>


</svg>

regards,

 

[Martin Honnen]

Joris Gillis wrote:

I've just discovered EcmaScript for Xml and I'm trying to play with it
in Firefox 1.5

In the SVG document below, an E4X XML tree is built up from scratch and
put inside the variable 'fresh'.
Any attempt, however, to append this fresh tree to the existing SVG DOM
tree seems to fail, possibly because there's a document mismatch. I
don't know how to solve it, though...

So far (in Firefox 1.5 releases) E4X is purely an addition to the
Spidermonkey scripting engine, there is no integration with the Mozilla
DOM implementation. So don't expect to be able to take an E4X XML object
and put that into a Mozilla DOM. You would need to use e.g.
var domDocument = new DOMParser().parseFromString(
e4xObject.toXMLString(),
'application/xml'
);
to have the Mozilla DOM XML parser parse the serialized E4X XML object.

There is bug <https://bugzilla.mozilla.org/show_bug.cgi?id=270553> for
an E4X <--> DOM integration.

 

[Joris Gillis]

Joris Gillis wrote:



So far (in Firefox 1.5 releases) E4X is purely an addition to the
Spidermonkey scripting engine, there is no integration with the Mozilla
DOM implementation. So don't expect to be able to take an E4X XML object
and put that into a Mozilla DOM. You would need to use e.g.
var domDocument = new DOMParser().parseFromString(
e4xObject.toXMLString(),
'application/xml'
);
to have the Mozilla DOM XML parser parse the serialized E4X XML object..

There is bug <https://bugzilla.mozilla.org/show_bug.cgi?id=270553> for
an E4X <--> DOM integration.

Thank you very much, Martin

I finally got it to work with your help

***
var domDocument = new DOMParser().parseFromString(
fresh.toXMLString(),
'application/xml'
);

var mynode=doc.importNode(domDocument.documentElement,true);
doc.getElementsByTagName("svg")[0].appendChild(mynode);
***

It would be neat if DOM and E4X were implemented, though. If only I had
the time & knowledge to correct the bug myself...

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="12cm" viewBox="-100 -100 400 400"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="draw(evt)">
<desc>SVG fractal</desc>
<script type="text/ecmascript; e4x=1"> <![CDATA[
var blueprint;
var components;
var doc;
var super;
var svgns="http://www.w3.org/2000/svg";
var xlinkns="http://www.w3.org/1999/xlink";
var svg = new Namespace("http://www.w3.org/2000/svg");
var xlink = new Namespace ("http://www.w3.org/1999/xlink");
default xml namespace="http://www.w3.org/2000/svg";
var limit=5;

function draw(evt) {
var svg = evt.target;
doc=svg.ownerDocument;
blueprint=doc.getElementById("blueprint");
super=doc.getElementById("super");
components=blueprint.getElementsByTagName("use");
components=[components.item(0),components.item(1),components.item(2)];

var fresh=<g>{frac(0)}</g>;
var domDocument = new
DOMParser().parseFromString(fresh.toXMLString(),'application/xml');
var mynode=doc.importNode(domDocument.documentElement,true);
doc.getElementsByTagName("svg")[0].appendChild(mynode);
}

function frac(depth) {
if (depth <limit) {
ret=new XML();
for each (comp in components) {
ret+=<g
transform={comp.getAttribute("transform")?comp.getAttribute("transform"):""}>
<svg viewBox="-15 -37 192 287" width="100" height="200"
preserveAspectRatio="none">
{frac(depth+1)}
</svg>
</g>;
}
return ret;
} else {
return <use xlink:href="#blueprint"
xmlns:xlink="http://www.w3.org/1999/xlink"/>;
}
}

]]> </script>
<defs>
<rect id="super" x="0" y="0" width="100" height="200" fill="gray"
stroke-width="3px"/>
<g id="blueprint" viewBox="0 0 200 100">
<use xlink:href="#super" stroke="blue" />
<use xlink:href="#super" stroke="red" transform="scale(0.5) rotate(30)
translate(200 200)"/>
<use xlink:href="#super" stroke="green" transform="scale(0.7)
rotate(90) translate(-50 -250)"/>
</g>
</defs>
</svg>