SVG – Learning by Coding

[ domtest2.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 12/02 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: 
 19:     <![CDATA[
 20: 
 21:     var count=0;
 22: 
 23:     function DOMinant(evt)
 24:     {
 25:       var svgdocsvgrootobjektrecneuanineu,
 26:           svgns="http://www.w3.org/2000/svg";
 27: 
 28: 
 29:       if(count==0)
 30:       {
 31:         svgdoc=evt.target.ownerDocument;                       // Dokumenteninstanz
 32:         svgroot=svgdoc.documentElement;                        // Wurzelelement
 33:         // oder: svgroot=document.documentElement;
 34: 
 35:         // Neue Eigenschaften fuer Kreis setzen
 36: 
 37:         objekt=svgdoc.getElementById("kreis");                 // getElementById()
 38:         objekt.setAttribute("r","70");                         // XML-Attribut setzen: setAttribute()
 39:         objekt.style.setProperty("fill","#FFC","");            // CSS-Attribut setzen: style.setProperty()
 40: 
 41: 
 42:         // Neues Element rect erstellen und mit Attributen sowie Werten versehen
 43: 
 44:         recneu=svgdoc.createElementNS(svgns,"rect");           // createElementNS()
 45: 
 46:         recneu.setAttribute("x","200");                        // setAttribute()
 47:         recneu.setAttribute("y","70");
 48:         recneu.setAttribute("width","0");
 49:         recneu.setAttribute("height","100");
 50:         recneu.setAttribute("style","fill: #090; stroke: #000; stroke-width: 1px");
 51: 
 52: 
 53:         // Neues Element animation erstellen und mit Attributen sowie Werten versehen
 54: 
 55:         anineu=svgdoc.createElementNS(svgns,"animate");
 56:         anineu.setAttribute("attributeName","width");
 57:         anineu.setAttribute("attributeType","XML");
 58:         anineu.setAttribute("begin","1s");
 59:         anineu.setAttribute("dur","10s");
 60:         anineu.setAttribute("fill","freeze");
 61:         anineu.setAttribute("from","0");
 62:         anineu.setAttribute("to","300");
 63: 
 64: 
 65:         // die neuen Elemente in den Dokumentenbaum einhaengen
 66: 
 67:         svgroot.appendChild(recneu).appendChild(anineu);       // appendChild()
 68:     
 69:         count++;
 70:       }
 71:     }
 72: 
 73: 
 74:     function DOMInfos(evt)
 75:     {
 76:       var svgdocanzahlobjektknotenkindkindobjektkindobjanznametypattrattranzoutput;
 77: 
 78:       svgdoc=evt.target.ownerDocument;                         // Dokumenteninstanz
 79: 
 80:       output="svgdoc: "+svgdoc+"\n";
 81: 
 82:       objekt=svgdoc.childNodes;                                // childNodes
 83:       anzahl=objekt.length;                                    // length
 84: 
 85:       for(j=0;j<anzahl;j++)
 86:       {
 87:         kind=objekt.item(j).childNodes;
 88:         kindobjanz=kind.length;
 89: 
 90:         if(kindobjanz>0)
 91:         {
 92:           for(l=0;l<kindobjanz;l++)
 93:           {
 94:             name=kind.item(l).nodeName;                        // nodeName
 95:             typ=kind.item(l).nodeType;                         // nodeType
 96: 
 97:             knoten="";
 98: 
 99:             if(typ==1)                                         // Elementknoten
100:             {
101:               attr=kind.item(l).attributes();                  // Attribute
102:               attranz=attr.length;
103:               knoten="Element "+name+" hat "attranz+" Attribute:";
104: 
105:               if(attranz>0)
106:               {
107:                 for(k=0;k<attranz;k++)
108:                 {
109:                   knoten+="\n"+attr.item(k).name+"=\""+attr.item(k).value+"\"";
110:                 }
111:               }
112:             }
113: 
114:             else if(typ==3)                                    // Textknoten
115:             {
116:               knoten="Text: "+name;
117:             }
118: 
119:             output+="\n"+knoten;
120:           }
121:         }
122:       123:  
124:       alert(output);
125:     }
126: 
127:     ]]>
128: 
129:     </script>
130: 
131:   </defs>
132: 
133:   <text x="20" y="30" style="fill: #000; font-size: 24px">DOM-Test 2</text>
134: 	
135:   <circle cx="100" cy="100" r="30" style="fill: #F00" onclick="DOMTest(evt)"/>
136:   <text id="txt" x="50" y="210" style="fill: #00C">Klicke den Kreis an!</text>
137: 
138:   <circle id="kreis" cx="100" cy="120" r="49" style="fill: #F00; stroke: #000; stroke-width: 2px" onclick="DOMinant(evt)"/>
139:   <text x="50" y="240">Klick auf den Kreis ändert Radius und Farbe und fügt Rechteck mit Animation hinzu.</text>
140:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="195" y="270" style="fill: #F00; text-decoration: underline" onclick="DOMInfos(evt)">Funktion DOMInfos() aufrufen ...</text></a>
141: 
142: </svg>

[zum Anfang]