SVG – Learning by Coding

[ Mozilla-DOM-Test_5.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 MozDOMTest5()
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,xmldoc,xsldoc,xsltproc,output;
32: 
33:             if(window.XMLHttpRequest)
34:             {
35:               // synchroner XMLHttpRequest-Zugriff, bei umfangreicheren Dokumenten
36:               // ggf. die asynchrone Variante verwenden, siehe Mozilla-DOM-Test_1.svg
37: 
38:               // XML laden
39:               req=new XMLHttpRequest();
40:               req.open("GET","moztest.xml",false);
41:               req.overrideMimeType("text/xml");
42:               req.send(null);
43:               xmldoc=req.responseXML;
44: 
45:               // XSL laden
46:               req=new XMLHttpRequest();
47:               req.open("GET","moztest.xsl",false);
48:               req.overrideMimeType("text/xml");
49:               req.send(null);
50:               xsldoc=req.responseXML;
51: 
52:               // neue XSLT-Prozessor-Instanz erzeugen und Stylesheet zuweisen
53:               xsltproc=new XSLTProcessor();
54:               xsltproc.importStylesheet(xsldoc);
55: 
56:               // Transformation ausfuehren (zwei Varianten):
57: 
58:               // transformToFragment() --> Ergebnis: Dokumentfragment
59:               output=xsltproc.transformToFragment(xmldoc,document);
60: 
61:               // transformToDocument() --> Ergebnis: Dokumentobjekt
62:               // output=xsltproc.transformToDocument(xmldoc);
63:               // output=document.importNode(output.documentElement,true);
64: 
65:               // Ergebnis der Transformation in den SVG-DOM-Baum einhaengen
66:               document.documentElement.appendChild(output);
67:             }
68:             else alert("Kein Ergebnis erhalten!");
69:           }
70:           else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
71:         }
72:         else alert("Der Test wurde bereits ausgeführt!");
73:       }
74: 
75:       ]]>
76:     </script>
77: 
78:   </defs>
79: 
80:   <text x="20" y="30" style="fill: #000; font-size: 24px">
81:     Mozilla-DOMSVG-Inhalte mittels XSLT erzeugen</text>
82: 
83:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="20" y="60" style="fill: #F00; font-size: 14px"
84:     onclick="MozDOMTest5();clk=false">Test ausführen!</text></a>
85: 
86: </svg>

[zum Anfang]