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: onload="Init()">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <script type="text/javascript">
19: <![CDATA[
20:
21: function Init()
22: {
23: if(window.getSVGViewerVersion && getSVGViewerVersion().indexOf("Adobe")!=-1)
24: {
25: var link1=document.getElementById("link1");
26: var link2=document.getElementById("link2");
27: link1.style.setProperty("visibility","visible","");
28: link2.style.setProperty("visibility","hidden","");
29: }
30: }
31:
32: ]]>
33: </script>
34:
35: <script type="text/javascript; e4x=1"><!-- E4X-Aktivierung ab Firefox 1.5 -->
36: <![CDATA[
37:
38: var clk=true;
39:
40: function MozDOMTest7()
41: {
42: if(clk)
43: {
44: if((navigator.mimeTypes &&
45: navigator.mimeTypes["image/svg+xml"] &&
46: !navigator.mimeTypes["image/svg+xml"].enabledPlugin) ||
47: document.implementation.hasFeature("org.w3c.dom.svg","1.0"))
48: {
49: var xmlcontent,new_rect;
50: var svgns="http://www.w3.org/2000/svg";
51:
52: // XML-Inhalte direkt zuweisen - alternativ mittels
53: // xmlcontent=new XML("<rechtecke>...</rechtecke>");
54: xmlcontent=<rechtecke>
55: <rechteck farbe="#0C6">
56: <x_koord>50</x_koord>
57: <y_koord>120</y_koord>
58: <breite>180</breite>
59: <hoehe>75</hoehe>
60: </rechteck>
61: <rechteck farbe="#69F">
62: <x_koord>300</x_koord>
63: <y_koord>70</y_koord>
64: <breite>100</breite>
65: <hoehe>250</hoehe>
66: </rechteck>
67: <rechteck farbe="#FC3">
68: <x_koord>100</x_koord>
69: <y_koord>250</y_koord>
70: <breite>90</breite>
71: <hoehe>40</hoehe>
72: </rechteck>
73: </rechtecke>;
74:
75: // XML-Inhalte als neue rect-Elemente aufbereiten
76: // .. verhaelt sich analog zu // in XPath-Ausdruecken
77: for each(rechteck in xmlcontent..rechteck)
78: {
79: new_rect=document.createElementNS(svgns,"rect");
80: new_rect.setAttribute("x",rechteck.x_koord);
81: new_rect.setAttribute("y",rechteck.y_koord);
82: new_rect.setAttribute("width",rechteck.breite);
83: new_rect.setAttribute("height",rechteck.hoehe);
84: new_rect.setAttribute("fill",rechteck.@farbe);
85:
86: // aktuelles rect-Element in den SVG-DOM-Baum einhaengen
87: document.documentElement.appendChild(new_rect);
88: }
89:
90: // alternative Variante
91: /*
92: var rect_anz=xmlcontent.rechteck.length();
93: for(i=0;i<rect_anz;i++)
94: {
95: new_rect=document.createElementNS(svgns,"rect");
96: new_rect.setAttribute("x",xmlcontent.rechteck[i].x_koord);
97: new_rect.setAttribute("y",xmlcontent.rechteck[i].y_koord);
98: new_rect.setAttribute("width",xmlcontent.rechteck[i].breite);
99: new_rect.setAttribute("height",xmlcontent.rechteck[i].hoehe);
100: new_rect.setAttribute("fill",xmlcontent.rechteck[i].@farbe);
101:
102: // aktuelles rect-Element in den SVG-DOM-Baum einhaengen
103: document.documentElement.appendChild(new_rect);
104: }
105: */
106:
107: // Information einblenden
108: document.getElementById("info").style.setProperty("visibility","visible","");
109: }
110: else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
111: }
112: else alert("Der Test wurde bereits ausgeführt!");
113: }
114:
115: ]]>
116: </script>
117:
118: </defs>
119:
120: <text x="20" y="30" style="fill: #000; font-size: 24px">
121: Mozilla-DOM: SVG und ECMAScript for XML (E4X)</text>
122:
123: <a id="link1" xlink:href="" style="visibility: hidden" onclick="return false">
124: <text x="20" y="60" style="fill: #F00; font-size: 14px"
125: onclick="alert('Die E4X-Techniken sind nicht verfügbar!')">
126: Test ausführen!</text></a>
127:
128: <a id="link2" xlink:href="" style="visibility: visible" onclick="return false">
129: <text x="20" y="60" style="fill: #F00; font-size: 14px"
130: onclick="MozDOMTest7();clk=false">Test ausführen!</text></a>
131:
132: <g id="info" style="visibility: hidden">
133: <text x="50" y="350" font-size="12px">
134: Die neuen SVG-Objekte wurden mittels E4X-Techniken generiert.</text>
135: </g>
136:
137: </svg>
[zum Anfang]