XML and HTML are similar in that you have tags with attributes, values, and tags are embedded in each other, the difference is that in HTML your stuck with a set amount of tags, in XML you make them up as you and keep track of them in your own DTD. I can explain a Wall definition as the code is expecting it to show you how to backtrace the XML structure.
var walls = document.getElementsByTagName('Wall');
for(var i = walls.length - 1; i &--#62;= 0; --i) {
var str = '';
var points = walls[i].getElementsByTagName('Point');
for(var j = points.length - 1; j &--#62;= 0; --j) {
var x = parseFloat(points[j].getAttribute('x'));
var y = -parseFloat(points[j].getAttribute('y'));
str += x + ',' + y + ' ';
if(minx &--#62; x) minx = x;
if(maxx &--#60; x) maxx = x;
if(miny &--#62; y) miny = y;
if(maxy &--#60; y) maxy = y;
}
var polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
polyline.setAttribute('points', str);
polyline.setAttribute('stroke', 'black');
polyline.setAttribute('stroke-width', stroke);
polyline.setAttribute('fill', 'none');
svg.appendChild(polyline);
}
The first line creates an array of walls by scanning for &<Wall> tags, <Wall></Wall>. The fourth line creates a point array and expects x and y attributes in the tag in the form of <Point x= y=/>. After the inner loop finishes running you have the code making polyline elements based on w3c's 2000 svg DTD. Because the point loop is inside the wall loop you know the point tags are embedded in wall tags <Wall> <Point x= y= /> </Wall> I'm not a javascript programmer, but it's usually pretty straightforward.