SVG – Learning by Coding

[ Mozilla-DOM-Test_7.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-DOMSVG 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]