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]