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]
