gecko/layout/svg/tests/example.xml

228 lines
7.5 KiB
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/1999/xhtml">
<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>