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)" onzoom="ZoomControl()">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <script type="text/javascript">
19: <![CDATA[
20:
21: var svgdoc,svgroot;
22:
23:
24: function getSVGDoc(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: svgroot=svgdoc.documentElement;
28: }
29:
30:
31: function ShowTooltip(mousemove_event)
32: {
33: var ttrelem,tttelem,posx,posy,curtrans,ctx,cty,txt;
34:
35: ttrelem=svgdoc.getElementById("ttr");
36: tttelem=svgdoc.getElementById("ttt");
37:
38: posx=mousemove_event.clientX;
39: posy=mousemove_event.clientY;
40:
41: txt="x="+posx+" | y="+posy;
42: tttelem.childNodes.item(0).data=txt;
43:
44: curtrans=svgroot.currentTranslate;
45: ctx=curtrans.x;
46: cty=curtrans.y;
47:
48: ttrelem.setAttribute("x",posx-ctx);
49: ttrelem.setAttribute("y",posy-cty-20);
50: tttelem.setAttribute("x",posx-ctx+5);
51: tttelem.setAttribute("y",posy-cty-8);
52: ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10);
53: tttelem.setAttribute("style","fill: #00C; font-size: 11px; visibility: visible");
54: ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px;\
55: visibility: visible");
56: }
57:
58:
59: function HideTooltip()
60: {
61: var ttrelem,tttelem;
62:
63: ttrelem=svgdoc.getElementById("ttr");
64: tttelem=svgdoc.getElementById("ttt");
65: ttrelem.setAttribute("style","visibility: hidden");
66: tttelem.setAttribute("style","visibility: hidden");
67: }
68:
69:
70: function ZoomControl()
71: {
72: var curzoom;
73:
74: curzoom=svgroot.currentScale;
75: svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
76: }
77:
78: ]]>
79: </script>
80:
81: </defs>
82:
83: <text x="20" y="30" style="fill: #000; font-size: 24px">
84: Tooltip bei Mausbewegung anzeigen</text>
85:
86: <rect x="20" y="50" width="500" height="300"
87: style="fill: #FFF; stroke: #000"
88: onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip()"/>
89:
90: <text x="35" y="200" style="fill: #F00; font-size: 12px; pointer-events: none">
91: Beim Bewegen des Mauszeigers über dem Rechteck werden die Koordinaten angezeigt.
92: </text>
93:
94: <g id="tooltip"><!-- Tooltip - Beginn (ttr=Tooltip-Rechteck, ttt=Tooltip-Text) -->
95: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
96: style="visibility: hidden"/>
97: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
98: </g><!-- Tooltip - Ende -->
99:
100: </svg>
[zum Anfang]
