SVG – Learning by Coding
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: <!-- Author: Dr. Thomas 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-size: 12px;
25: }
26:
27: tspan
28: {
29: fill: #F00;
30: font-size: 12px;
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=100, y=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 Text) zurück setzen]
169: </text>
170: </a>
171:
172: </svg>
[zum Anfang]
