SVG – Learning by Coding

[ Mozilla-DOM-Test_1.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 MozDOMTest1()
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,svgobject;
32: 
33:             // synchrone Variante
34:             if(window.XMLHttpRequest)
35:             {
36:               // XML laden
37:               req=new XMLHttpRequest();
38:               req.open("GET","svgcode.xml",false);
39:               req.overrideMimeType("text/xml");
40:               req.send(null);
41:               xmlobject=req.responseXML;
42: 
43:               // g-Element mit Inhalt aus xmlobject abfragen
44:               svgobject=document.importNode(
45:                 xmlobject.documentElement.getElementsByTagName("g").item(0),true);
46:   
47:               // Ergebnis (Dokumentfragment) in den SVG-DOM-Baum einhaengen
48:               document.documentElement.appendChild(svgobject);
49:             }
50: 
51:             /*
52:             // asynchrone Variante, ggf. fuer umfangreichere XML-Dokumente einsetzen
53:             if(window.XMLHttpRequest)
54:             {
55:               // XML laden
56:               req=new XMLHttpRequest();
57:               req.onreadystatechange=function()
58:               {
59:                 if(req.readyState==4)
60:                 {
61:                   if(req.status==200)
62:                   {
63:                     xmlobject=req.responseXML;
64: 
65:                     // g-Element mit Inhalt aus xmlobject abfragen
66:                     svgobject=document.importNode(
67:                       xmlobject.documentElement.getElementsByTagName("g").item(0),true);
68: 
69:                     // Ergebnis (Dokumentfragment) in den SVG-DOM-Baum einhaengen
70:                     document.documentElement.appendChild(svgobject);
71:                   }
72:                 }
73:               }
74:               req.open("GET","svgcode.xml",true);
75:               req.overrideMimeType("text/xml");
76:               req.send(null);
77:             }
78:             */
79:             else alert("Kein Ergebnis erhalten!");
80:           }
81:           else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
82:         }
83:         else alert("Der Test wurde bereits ausgeführt!");
84:       }
85: 
86:       ]]>
87:     </script>
88: 
89:   </defs>
90: 
91:   <text x="20" y="30" style="fill: #000; font-size: 24px">
92:     Mozilla-DOMSVG-Inhalte aus externem XML-Dokument laden</text>
93: 
94:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="20" y="60" style="fill: #F00; font-size: 14px"
95:     onclick="MozDOMTest1();clk=false">Test ausführen!</text></a>
96: 
97: </svg>

[zum Anfang]