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:
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 MozDOMTest2()
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 xmlcontent,parser,xmlobject,svgobject;
32:
33: // XML-Inhalt als String
34: xmlcontent='<svg xmlns="http://www.w3.org/2000/svg">';
35: xmlcontent+=' <g>';
36: xmlcontent+=' <circle cx="150" cy="150" r="60" fill="#FF0" stroke="#000"/>';
37: xmlcontent+=' <text x="50" y="250" font-size="12px">SVG mittels parseFromString() erzeugt.</text>';
38: xmlcontent+=' </g>';
39: xmlcontent+='</svg>';
40:
41: // neue DOM-Parser-Instanz und Dokumentobjekt aus dem String erstellen
42: if(window.DOMParser)
43: {
44: parser=new DOMParser();
45: xmlobject=parser.parseFromString(xmlcontent,"text/xml");
46:
47: // g-Element mit Inhalt aus xmlobject abfragen
48: svgobject=document.importNode(
49: xmlobject.documentElement.getElementsByTagName("g").item(0),true);
50:
51: // Ergebnis (Dokumentfragment) in den SVG-DOM-Baum einhaengen
52: document.documentElement.appendChild(svgobject);
53: }
54: else alert("Kein Ergebnis erhalten!");
55: }
56: else alert("Keine SVG-Implementierung\nauf Mozilla-Basis gefunden!");
57: }
58: else alert("Der Test wurde bereits ausgeführt!");
59: }
60:
61: ]]>
62: </script>
63:
64: </defs>
65:
66: <text x="20" y="30" style="fill: #000; font-size: 24px">
67: Mozilla-DOM: SVG-Inhalte aus XML-Zeichenkette laden</text>
68:
69: <a xlink:href="" cursor="pointer" onclick="return false"><text x="20" y="60" style="fill: #F00; font-size: 14px"
70: onclick="MozDOMTest2();clk=false">Test ausführen!</text></a>
71:
72: </svg>
[zum Anfang]
