SVG – Learning by Coding

[ parsexml.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="UTF-8"
  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 11/02 - thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 12: 
 13: <title>ASV-Funktion parseXML()</title>
 14: <desc>XML-Inhalte mittels ASV-Funktion parseXML() in SVG einbinden</desc>
 15: 
 16: <defs>
 17: <script type="text/javascript">
 18: <![CDATA[
 19: 
 20: var svgdoc,svgroot,context,xmldoc,svgns,ver="";
 21: 
 22: function Init(load_evt)
 23: {
 24:   svgdoc=load_evt.target.ownerDocument;
 25:   svgroot=svgdoc.rootElement;
 26:   svgns="http://www.w3.org/2000/svg";
 27: 
 28:   // Version des SVG Viewers ausgeben
 29:   if(window.getSVGViewerVersion)
 30:   {
 31:     ver=getSVGViewerVersion();
 32:     svgdoc.getElementById("version").firstChild.nodeValue+=ver;
 33:   }
 34: }
 35: 
 36: function TextHover(obj,color,decor)
 37: {
 38:   obj.target.style.setProperty("fill",color,"");
 39:   obj.target.style.setProperty("text-decoration",decor,"");
 40: }
 41: 
 42: function LadeXML(evt)
 43: {
 44:   if(ver.indexOf("Adobe")!=-1 && window.getURL)
 45:   {
 46:     context=evt.target.ownerDocument;
 47:     getURL("objekte.xml",callback);
 48:   }
 49:   else alert("Diese Technik ist nicht verfuegbar!");
 50: }
 51: 
 52: function callback(urlRequestStatus)
 53: {
 54:   /* 
 55:     Rueckgabewerte des Objektes urlRequestStatus:
 56:     - urlRequestStatus.success;
 57:     - urlRequestStatus.contentType;
 58:     - urlRequestStatus.content;
 59:   */
 60: 
 61:   if(urlRequestStatus.success)
 62:   {
 63:     if(ver.indexOf("Adobe")!=-1)
 64:     {
 65:       if(ver.indexOf("6.0")!=-1)xmldoc=parseXML(urlRequestStatus.content);
 66:       else xmldoc=parseXML(urlRequestStatus.content,context);
 67:       // eingelesene XML-Daten ausgeben:
 68:       // alert(printNode(xmldoc));
 69:     }
 70: 
 71:     // Kreis-Informationen aus XML-Struktur lesen
 72:     kreis_cx=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("mittelpunkt_x");
 73:     kreis_cy=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("mittelpunkt_y");
 74:     kreis_r=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("radius");
 75:     kreis_fill=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("farbe");
 76: 
 77:     // Kreis im SVG-Dokument erzeugen
 78:     neuer_knoten=context.createElementNS(svgns,"circle");
 79:     neuer_knoten.setAttribute("cx",kreis_cx);
 80:     neuer_knoten.setAttribute("cy",kreis_cy);
 81:     neuer_knoten.setAttribute("r",kreis_r);
 82:     neuer_knoten.setAttribute("fill",kreis_fill);
 83:     svgroot.appendChild(neuer_knoten);
 84: 
 85:     // Rechteck-Informationen aus XML-Struktur lesen
 86:     rechteck_x=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("oben_links_x");
 87:     rechteck_y=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("oben_links_y");
 88:     rechteck_width=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("breite");
 89:     rechteck_height=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("hoehe");
 90:     rechteck_fill=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("farbe");
 91: 
 92:     // Rechteck im SVG-Dokument erzeugen
 93:     neuer_knoten=context.createElementNS(svgns,"rect");
 94:     neuer_knoten.setAttribute("x",rechteck_x);
 95:     neuer_knoten.setAttribute("y",rechteck_y);
 96:     neuer_knoten.setAttribute("width",rechteck_width);
 97:     neuer_knoten.setAttribute("height",rechteck_height);
 98:     neuer_knoten.setAttribute("fill",rechteck_fill);
 99:     svgroot.appendChild(neuer_knoten);
100: 
101:     // Infotext aus XML-Struktur lesen und im SVG-Dokument anzeigen
102:     infotext=xmldoc.childNodes.item(0).childNodes.item(5).firstChild.nodeValue;
103:     svgdoc.getElementById("info").firstChild.nodeValue=infotext;
104: 
105:     // generierter SVG-Code fuer Kreis und Rechteck mit printNode() ausgeben
106:     if(window.printNode)
107:     {
108:       kreis_svg=printNode(svgdoc.getElementsByTagName("circle").item(0));
109:       rechteck_svg=printNode(svgdoc.getElementsByTagName("rect").item(0));
110:       alert("Ausgabe der generierten Objekte mit printNode()\n\nKreis: "+kreis_svg+"\nRechteck: "+rechteck_svg);
111:     }
112:   }
113: }
114: 
115: ]]>
116: </script>
117: </defs>
118: 
119: <text x="30" y="30" style="fill: #000; font-size: 24px">XML-Inhalte mittels ASV-Funktion parseXML() in SVG einbinden</text>
120: 
121: <!-- Funktionsaufruf von LadeXML() -->
122: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="80" style="fill: #00C" onclick="LadeXML(evt)" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">XML-Daten laden und darstellen</text></a>
123: 
124: <line x1="30" y1="300" x2="730" y2="300" style="stroke: #CCC; stroke-width: 1px"/>
125: 
126: <text id="info" x="30" y="330" style="fill: #000; font-size: 14px"> </text>
127: 
128: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/"><text x="550" y="350" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#000','none')">&#169; by Dr. Thomas Meinike 2002</text></a>
129: 
130: <text id="version" x="30" y="350">SVGViewerVersion: </text>
131: 
132: 
133: </svg>

[zum Anfang]