SVG – Learning by Coding

[ textinformationen.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 TextInfos(x)
 51:       {
 52:         var textobj,textinfo,point;
 53: 
 54:         textobj=svgdoc.getElementById("testtext");
 55:         if(x==0)textinfo=textobj.getNumberOfChars();
 56:         if(x==1)textinfo=textobj.getComputedTextLength();
 57:         if(x==2)textinfo=textobj.getSubStringLength(5,3);
 58:         if(x==3)textinfo=textobj.getStartPositionOfChar(9).x;
 59:         if(x==4)textinfo=textobj.getStartPositionOfChar(9).y;
 60:         if(x==5)textinfo=textobj.getEndPositionOfChar(9).x;
 61:         if(x==6)textinfo=textobj.getEndPositionOfChar(9).y;
 62:         if(x==7)textinfo=textobj.getExtentOfChar(9).width;
 63:         if(x==8)textinfo=textobj.getExtentOfChar(9).height;
 64:         if(x==9)textinfo=textobj.getRotationOfChar(9);
 65:         if(x==10)
 66:         {
 67:           textinfo="'zur' wird markiert.";
 68:           textobj.selectSubString(5,3);
 69:         }
 70:         if(x==11)
 71:         {
 72:           point=svgroot.createSVGPoint();
 73:           point.x=100;
 74:           point.y=75;
 75:           textinfo=textobj.getCharNumAtPosition(point);
 76:           textobj.selectSubString(textobj.getCharNumAtPosition(point),1);
 77:         }
 78: 
 79:         alert(textinfo);
 80:       }
 81: 
 82:       ]]>
 83:     </script>
 84: 
 85:   </defs>
 86: 
 87:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 88:     Auslesen von Textinformationen mit DOM-Methoden</text>
 89: 
 90:   <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090">
 91:     Text zur Vermessung
 92:   </text>
 93:  
 94:   <a xlink:href="" cursor="pointer" onclick="return false">
 95:     <text x="30" y="100" onclick="TextInfos(0)">
 96:       <tspan>getNumberOfChars()</tspan> [Zeichenanzahl des Testtextes]
 97:     </text>
 98:   </a>
 99: 
100:   <a xlink:href="" cursor="pointer" onclick="return false">
101:     <text x="30" y="120" onclick="TextInfos(1)">
102:       <tspan>getComputedTextLength()</tspan> [Länge des Testtextes in px]
103:     </text>
104:   </a>
105: 
106:   <a xlink:href="" cursor="pointer" onclick="return false">
107:     <text x="30" y="140" onclick="TextInfos(2)">
108:       <tspan>getSubStringLength(5,3)</tspan> [Länge der Teilzeichenkette 'zur' in px]
109:     </text>
110:   </a>
111: 
112:   <a xlink:href="" cursor="pointer" onclick="return false">
113:     <text x="30" y="160" onclick="TextInfos(3)">
114:       <tspan>getStartPositionOfChar(9).x</tspan> [x-Startposition vom Buchstaben V]
115:     </text>
116:   </a>
117: 
118:   <a xlink:href="" cursor="pointer" onclick="return false">
119:     <text x="30" y="180" onclick="TextInfos(4)">
120:       <tspan>getStartPositionOfChar(9).y</tspan> [y-Startposition vom Buchstaben V]
121:     </text>
122:   </a>
123: 
124:   <a xlink:href="" cursor="pointer" onclick="return false">
125:     <text x="30" y="200" onclick="TextInfos(5)">
126:       <tspan>getEndPositionOfChar(9).x</tspan> [x-Endposition vom Buchstaben V]
127:     </text>
128:   </a>
129: 
130:   <a xlink:href="" cursor="pointer" onclick="return false">
131:     <text x="30" y="220" onclick="TextInfos(6)">
132:       <tspan>getEndPositionOfChar(9).y</tspan> [y-Endposition vom Buchstaben V]
133:     </text>
134:   </a>
135: 
136:   <a xlink:href="" cursor="pointer" onclick="return false">
137:     <text x="30" y="240" onclick="TextInfos(7)">
138:       <tspan>getExtentOfChar(9).width</tspan> [Rechteck-Breite vom Buchstaben V]
139:     </text>
140:   </a>
141: 
142:   <a xlink:href="" cursor="pointer" onclick="return false">
143:     <text x="30" y="260" onclick="TextInfos(8)">
144:       <tspan>getExtentOfChar(9).height</tspan> [Rechteck-Höhe vom Buchstaben V]
145:     </text>
146:   </a>
147: 
148:   <a xlink:href="" cursor="pointer" onclick="return false">
149:     <text x="30" y="280" onclick="TextInfos(9)">
150:       <tspan>getRotationOfChar(9)</tspan> [Rotationswinkel vom Buchstaben V]
151:     </text>
152:   </a>
153: 
154:   <a xlink:href="" cursor="pointer" onclick="return false">
155:     <text x="30" y="300" onclick="TextInfos(10)">
156:       <tspan>selectSubString(5,3)</tspan> [Teilzeichenkette 'zur' markieren]
157:     </text>
158:   </a>
159: 
160:   <a xlink:href="" cursor="pointer" onclick="return false">
161:     <text x="30" y="320" onclick="TextInfos(11)">
162:       <tspan>getCharNumAtPosition()</tspan> [Zeichen ab 0 an der Stelle x=100y=75]
163:     </text>
164:   </a>
165: 
166:   <a xlink:href="" cursor="pointer" onclick="return false">
167:     <text x="30" y="340" onclick="svgroot.deselectAll()">
168:       <tspan>deselectAll()</tspan> [Ausgewählte Objekte (markierten Textzurück setzen]
169:     </text>
170:   </a>
171: 
172: </svg>

[zum Anfang]