SVG – Learning by Coding
1:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3:
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4:
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5:
]>
6: 7:
<!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8:
<!-- Author: Dr. Thomas Meinike 09/05 - thomas@handmadecode.de -->
9: 10:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11: 12:
<title>SVG - Learning by Coding</title>
13:
<desc>SVG-Spezifikation in Beispielen</desc>
14: 15:
<defs>
16: 17:
<script type="text/javascript">
18:
<![CDATA[
19: 20:
var clk=true;
21: 22:
function MozDOMTest6()
23:
{
24:
if(clk)
25:
{
26:
if((navigator.mimeTypes &&
27:
navigator.mimeTypes["image/svg+xml"] &&
28:
!navigator.mimeTypes["image/svg+xml"].enabledPlugin) ||
29:
document.implementation.hasFeature("org.w3c.dom.svg","1.0"))
30:
{
31:
var req,xmlobject,new_rect,basepath,xptype,xpev,nsres;
32:
var a,x,y,w,h,f,anzahl,x_akt,y_akt,w_akt,h_akt,f_akt;
33:
var svgns="http://www.w3.org/2000/svg";
34: 35:
// synchroner XMLHttpRequest-Zugriff, bei umfangreicheren Dokumenten
36:
// ggf. die asynchrone Variante verwenden, siehe Mozilla-DOM-Test_1.svg
37:
if(window.XMLHttpRequest && window.XPathEvaluator)
38:
{
39:
// XML laden
40:
req=new XMLHttpRequest();
41:
req.open("GET","moztest.xml",false);
42:
req.overrideMimeType("text/xml");
43:
req.send(null);
44:
xmlobject=req.responseXML;
45: 46:
// XPathEvaluator-Instanz erzeugen
47:
xpev=new XPathEvaluator();
48: 49:
// Namespace-Resolver zuweisen
50:
if(xpev.createNSResolver)
51:
{
52:
nsres=xpev.createNSResolver(xmlobject.ownerDocument==null ?
53:
xmlobject.documentElement : xmlobject.ownerDocument.documentElement);
54:
}
55:
else nsres=null;
56: 57:
// Vorgaben fuer die XPath-Verarbeitung
58:
xptype=XPathResult.ANY_TYPE;
59:
basepath="/rechtecke/rechteck/";
60: 61:
// Anzahl der rechteck-Elemente abfragen
62:
a=xpev.evaluate("count(//rechteck)",xmlobject,nsres,xptype,null);
63:
anzahl=a.numberValue;
64: 65:
// Details zu rechteck-Elementen abfragen
66:
x=xpev.evaluate(basepath+"x_koord",xmlobject,nsres,xptype,null);
67:
y=xpev.evaluate(basepath+"y_koord",xmlobject,nsres,xptype,null);
68:
w=xpev.evaluate(basepath+"breite",xmlobject,nsres,xptype,null);
69:
h=xpev.evaluate(basepath+"hoehe",xmlobject,nsres,xptype,null);
70:
f=xpev.evaluate(basepath+"@farbe",xmlobject,nsres,xptype,null);
71: 72:
// Ergebnisse als neue rect-Elemente aufbereiten
73:
for(i=0;i<anzahl;i++)
74:
{
75:
x_akt=x.iterateNext();
76:
y_akt=y.iterateNext();
77:
w_akt=w.iterateNext();
78:
h_akt=h.iterateNext();
79:
f_akt=f.iterateNext();
80: 81:
new_rect=document.createElementNS(svgns,"rect");
82:
new_rect.setAttribute("x",x_akt.textContent);
83:
new_rect.setAttribute("y",y_akt.textContent);
84:
new_rect.setAttribute("width",w_akt.textContent);
85:
new_rect.setAttribute("height",h_akt.textContent);
86:
new_rect.setAttribute("fill",f_akt.textContent);
87: 88:
// aktuelles rect-Element in den SVG-DOM-Baum einhaengen
89:
document.documentElement.appendChild(new_rect);
90:
}
91:
// Information einblenden
92:
document.getElementById("info").style.setProperty("visibility","visible","");
93:
}
94:
else alert("Kein Ergebnis erhalten!");
95:
}
96:
else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
97:
}
98:
else alert("Der Test wurde bereits ausgeführt!");
99:
}
100: 101:
]]>
102:
</script>
103: 104:
</defs>
105: 106:
<text x="20" y="30" style="fill: #000; font-size: 24px">
107:
Mozilla-DOM: SVG-Inhalte mittels XPath erzeugen</text>
108: 109:
<a xlink:href="" cursor="pointer" onclick="return false"><text x="20" y="60" style="fill: #F00; font-size: 14px"
110:
onclick="MozDOMTest6();clk=false">Test ausführen!</text></a>
111: 112:
<g id="info" style="visibility: hidden">
113:
<text x="80" y="350" font-size="12px">
114:
Die neuen SVG-Objekte wurden mittels XPath generiert.</text>
115:
<a xlink:href="moztest.xml"><text x="190" y="370"
116:
style="fill: #00C; font-size: 12px">XML-Dokument</text></a>
117:
</g>
118: 119:
</svg>
[zum Anfang]
