gecko-dev/layout/svg/tests/example.xml

<?xml version="1.0"?>
<?xml-stylesheet href="svg.css" type="text/css"?>
<!DOCTYPE svg SYSTEM "SVG-20000202.dtd" > 
<!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 10 January 2000//EN" --> 
<!--  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> --> 
<svg xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg" 
     xmlns:html="http://www.w3.org/TR/REC-html40">

  <html:script>
<![CDATA[

var gIsInit  = false;
var barXPnts = new Array();
var barYPnts = new Array();

var nodes = new Array();
var gBarMax   = 200;
var gHeight   = 80;
var gBarCount = 10;
var gBarDir   = 1;
var gGo       = true;

function init()
{
  dump("----------------\n");
  nodes[0] = findNode(document.documentElement, "bar21");
  nodes[1] = findNode(document.documentElement, "bar22");
  nodes[2] = findNode(document.documentElement, "bar23");
  nodes[3] = findNode(document.documentElement, "bargrid21");
  nodes[4] = findNode(document.documentElement, "bargrid22");
  nodes[5] = findNode(document.documentElement, "bargrid23");
  dump("----------------\n");
  gGo = true;
  setTimeout("moveit()", 100);
}
function stop()
{
  gGo = false;
}
function ChangeBar(name, height)
{
  today = new Date();
  stime = today.getMilliseconds();
  dump("----------------\n");
  str = name+"1";
  node = findNode(document.documentElement, str); 
  //node = document.getElementById(str);
  today = new Date();
  etime = today.getMilliseconds();
  dump("1----------------"+(etime-stime)+"\n");
  attr = document.createAttribute("points"); 
  attr.value = "30 " + height + " 30 210 50 210 50 " + height;
  node.attributes.setNamedItem(attr); 
  today = new Date();
  stime = today.getMilliseconds();
  dump("2----------------"+(stime-etime)+"\n");

  str = name+"2";
  node = findNode(document.documentElement, str); 
  dump("3----------------\n");
  attr.value = "30 " + height + " 50 " + height + " 60 " + (height-10) + " 40 " + (height-10);
  node.attributes.setNamedItem(attr); 
  dump("4----------------\n");

  str = name+"3";
  node = findNode(document.documentElement, str); 
  dump("5----------------\n");
  attr.value = "50 " + height + " 60 " + (height-10) + " 60 200 50 210";
  node.attributes.setNamedItem(attr); 
  dump("=================\n");
}

function ChangeBarWithNodes(node1, node2, node3, height)
{
  attr = document.createAttribute("points"); 
  attr.value = "30 " + height + " 30 210 50 210 50 " + height;
  node1.attributes.setNamedItem(attr); 

  attr.value = "30 " + height + " 50 " + height + " 60 " + (height-10) + " 40 " + (height-10);
  node2.attributes.setNamedItem(attr); 

  attr.value = "50 " + height + " 60 " + (height-10) + " 60 200 50 210";
  node3.attributes.setNamedItem(attr); 
}

function moveit()
{
  //ChangeBar("bar2", 150);
  //ChangeBar("bargrid2", 150);

  ChangeBarWithNodes(nodes[0], nodes[1], nodes[2], gHeight);
  ChangeBarWithNodes(nodes[3], nodes[4], nodes[5], gHeight);

  gHeight += gBarDir;
  gBarCount--;
  //dump("gHeight: "+gHeight+"   gBarCount: "+gBarCount+"  gBarDir: "+gBarDir+"\n");
  if (gHeight > gBarMax || gHeight < 1) {
    gBarDir *= -1;
    gBarCount = (Math.random() * 15)+3;
    //dump("Changining directions: "+gBarDir+"\n");
    if (gHeight > gBarMax) {
      gHeight = gBarMax;
    } else {
      gHeight = 1;
    }
  } else {
    if (gBarCount < 1) {
      gBarDir *= -1;
      gBarCount = (Math.random() * 15)+3;
      //dump("----> "+gBarCount+"\n");
    }
  }
  if (gGo) {
    setTimeout("moveit()", 100);
  }

}

function findNode(node, nodename)
{
  var type = node.nodeType;
  if (type == Node.ELEMENT_NODE) {

      // open tag
      //dump("\<" + node.tagName);

      // dump the attributes if any
      attributes = node.attributes;
      if (null != attributes) {
        var countAttrs = attributes.length;
        var index = 0;
        while(index < countAttrs) {
          att = attributes[index];
          if (null != att) {
            //dump(" " + att.name + "=" + att.value+" ["+nodename+"]\n");
            if (att.name == "id" && att.value == nodename) {
              //dump("Found it!\n");
              return node;
            }
          }
          index++;
        }
      }

      // recursively dump the children
      if (node.hasChildNodes()) {
	      // close tag
        //dump(">");

        // get the children
        var children = node.childNodes;
        var length = children.length;
        var count = 0;
        while(count < length) {
          child = children[count];
          fndNode = findNode(child, nodename);
          if (fndNode != null) {
            return fndNode;
          }
          count++;
        }
        //dump("</" + node.tagName + ">");
      } else {
	      // close tag
        //dump("/>");
      }

      
  }
  // if it's a piece of text just dump the text
  else if (type == Node.TEXT_NODE) {
      //dump(node.data);
  }
  return null;
}

]]>
  </html:script>	

  <g>
    <polyline x="55" y="10" id="bg" points="20 0 220 0 220 200 20 200"/> 
    <polyline x="55" y="10" id="bg" points="20 0 20 200 0 220 0 20 0 20  20 0"/> 
    <polyline x="55" y="10" id="bg" points="20 200 220 200 200 220 0 220"/> 

    <polyline x="55" y="10" id="grid" points="20 0 220 0 220 200 20 200"/> 
    <polyline x="55" y="10" id="grid" points="20 0 20 200 0 220 0 20 0 20"/> 
    <polyline x="55" y="10" id="grid" points="20 200 220 200 200 220 0 220"/> 

    <polyline x="55" y="10" id="grid" points="20  220 40  200  40   0"/> 
    <polyline x="55" y="10" id="grid" points="40  220 60  200  60   0"/> 
    <polyline x="55" y="10" id="grid" points="60  220 80  200  80   0"/> 
    <polyline x="55" y="10" id="grid" points="80  220 100 200  100  0"/> 
    <polyline x="55" y="10" id="grid" points="100 220 120 200  120  0"/> 
    <polyline x="55" y="10" id="grid" points="120 220 140 200  140  0"/> 
    <polyline x="55" y="10" id="grid" points="140 220 160 200  160  0"/> 
    <polyline x="55" y="10" id="grid" points="160 220 180 200  180  0"/> 
    <polyline x="55" y="10" id="grid" points="180 220 200 200  200  0"/> 

    <polygon x="55" y="10" id="bar1" points="30 60 30 210 50 210 50 60"/> 
    <polygon x="55" y="10" id="bar1" points="30 60 50 60 60 50 40 50"/> 
    <polygon x="55" y="10" id="bar1" points="50 60 60 50 60 200 50 210"/> 

    <polyline x="55" y="10" id="grid" points="30 60 30 210 50 210 50 60"/> 
    <polyline x="55" y="10" id="grid" points="30 60 50 60 60 50 40 50"/> 
    <polyline x="55" y="10" id="grid" points="50 60 60 50 60 200 50 210"/> 


    <polygon x="95" y="10" id="bar21" points="30 80 30 210 50 210 50 80"/> 
    <polygon x="95" y="10" id="bar22" points="30 80 50 80  60 70  40 70"/> 
    <polygon x="95" y="10" id="bar23" points="50 80 60 70  60 200 50 210"/> 

    <polyline x="95" y="10" id="bargrid21" points="30 80 30 210 50 210 50 80"/> 
    <polyline x="95" y="10" id="bargrid22" points="30 80 50 80  60 70  40 70"/> 
    <polyline x="95" y="10" id="bargrid23" points="50 80 60 70  60 200 50 210"/> 

    <polygon x="400" y="20" id="rect" points="10 10 50 10 50 50"/> 
    <polygon x="400" y="75" id="poly" points="10 10 50 10 50 50 45 70 32 32 80 20"/> 
    <polyline x="400" y="150" id="poly" points="10 10 50 10 50 50 45 70 32 32 80 20"/> 

  </g>
  <foreignobject>
    <html:div style="position:absolute;top:5px;left:385px;">Simple Polygons</html:div>
    <html:div style="position:absolute;top:240px;left:115px;">A Simple Graph</html:div>
    <html:input type="button" style="position:absolute;top:260px;left:350px;" onclick="init();" value="Start"/>
    <html:input type="button" style="position:absolute;top:260px;left:390px;" onclick="stop();" value="Stop"/>
  </foreignobject>
</svg>