SVG – Learning by Coding

[ textbearbeiten.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 02/03 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       text
 22:       {
 23:         fill#00C;
 24:         font-size12px;
 25:       }
 26: 
 27:       tspan
 28:       {
 29:         fill#F00;
 30:         font-size12px;
 31:       }
 32: 
 33:       ]]>
 34:     </style>
 35: 
 36: 
 37:     <script type="text/javascript">
 38:       <![CDATA[
 39: 
 40:       var svgdoc,svgroot;
 41: 
 42: 			
 43:       function getSVGDoc(load_evt)
 44:       {
 45:         svgdoc=load_evt.target.ownerDocument;
 46:         svgroot=svgdoc.documentElement;
 47:       }
 48: 
 49: 
 50:       function TextBearbeiten(x)
 51:       {
 52:         var textobj;
 53: 
 54:         textobj=svgdoc.getElementById("testtext").firstChild;
 55: 
 56:         // wenn Zahlenwerte vorhanden sind:
 57:         // erster Zahlenwert = Startposition
 58:         // zweiter Zahlenwert = Zeichenanzahl           
 59: 
 60:         if(x==0)textobj.appendData(" gedacht");
 61:         if(x==1)textobj.insertData(9,"weiteren ");
 62:         if(x==2)textobj.replaceData(5,3,"für");
 63:         if(x==3)textobj.deleteData(16,1);
 64:         if(x==4)alert(textobj.data);
 65:         if(x==5)textobj.data="Ein ganz anderer Text";
 66:         if(x==6)alert(textobj.length);
 67:       }
 68: 
 69:       ]]>
 70:     </script>
 71: 
 72:   </defs>
 73: 
 74:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 75:     DOM-Methoden zur Zeichendatenverarbeitung</text>
 76: 
 77:   <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090">Text zur Bearbeitung</text>
 78: 
 79:   <a xlink:href="" cursor="pointer" onclick="return false">
 80:     <text x="30" y="100" onclick="TextBearbeiten(0)">
 81:       <tspan>appendData()</tspan> [Zeichendaten anfügen]
 82:     </text>
 83:   </a>
 84: 
 85:   <a xlink:href="" cursor="pointer" onclick="return false">
 86:     <text x="30" y="120" onclick="TextBearbeiten(1)">
 87:       <tspan>insertData()</tspan> [Zeichendaten einfügen]
 88:     </text>
 89:   </a>
 90: 
 91:   <a xlink:href="" cursor="pointer" onclick="return false">
 92:     <text x="30" y="140" onclick="TextBearbeiten(2)">
 93:       <tspan>replaceData()</tspan> [Zeichendaten ersetzen]
 94:     </text>
 95:   </a>
 96: 
 97:   <a xlink:href="" cursor="pointer" onclick="return false">
 98:     <text x="30" y="160" onclick="TextBearbeiten(3)">
 99:       <tspan>deleteData()</tspan> [Zeichendaten löschen]
100:     </text>
101:   </a>
102: 
103:   <a xlink:href="" cursor="pointer" onclick="return false">
104:     <text x="30" y="180" onclick="TextBearbeiten(4)">
105:       <tspan>data</tspan> [Zeichenkette auslesen]
106:     </text>
107:   </a>
108: 
109:   <a xlink:href="" cursor="pointer" onclick="return false">
110:     <text x="30" y="200" onclick="TextBearbeiten(5)">
111:       <tspan>data()</tspan> [Zeichenkette neu schreiben]
112:     </text>
113:   </a>
114: 
115:   <a xlink:href="" cursor="pointer" onclick="return false">
116:     <text x="30" y="220" onclick="TextBearbeiten(6)">
117:       <tspan>length</tspan> [Länge der Zeichenkette ausgeben]
118:     </text>
119:   </a>
120: 
121: </svg>

[zum Anfang]