SVG – Learning by Coding

[ Mozilla-DOM-Test_6.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: 
 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-DOMSVG-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]