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 11/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: texte=svgdoc.getElementById("tooltip").getElementsByTagName("text");
30: }
31:
32:
33: function ShowTooltipMZ(mousemove_event,txt)
34: {
35: var ttrelem,tttelem,posx,posy,curtrans,ctx,cty,txt;
36: var sollbreite,maxbreite,ges,anz,tmp,txl,neu,i,k,l
37:
38: ttrelem=svgdoc.getElementById("ttr");
39: tttelem=svgdoc.getElementById("ttt");
40:
41: posx=mousemove_event.clientX;
42: posy=mousemove_event.clientY;
43:
44: for(i=1;i<=5;i++)texte.item(i).firstChild.data="";
45:
46: sollbreite=150;
47:
48: tttelem.childNodes.item(0).data=txt;
49: ges=tttelem.getComputedTextLength();
50:
51: tttelem.childNodes.item(0).data="";
52:
53: anz=Math.ceil(ges/sollbreite);
54:
55: tmp=txt.split(" ");
56: txl=new Array(tmp.length);
57: neu=new Array(anz);
58:
59: for(i=0;i<tmp.length;i++)
60: {
61: tttelem.childNodes.item(0).data=tmp[i];
62: txl[i]=tttelem.getComputedTextLength();
63: }
64:
65: k=0;
66: maxbreite=0;
67:
68: for(i=0;i<anz;i++)
69: {
70: l=0,neu[i]="";
71:
72: while(l+txl[k]<1.1*sollbreite && k<tmp.length)
73: {
74: l+=txl[k];
75: neu[i]+=tmp[k]+" ";
76: k++;
77: if(maxbreite<l)maxbreite=l;
78: }
79: }
80:
81: curtrans=svgroot.currentTranslate;
82: ctx=curtrans.x;
83: cty=curtrans.y;
84:
85: ttrelem.setAttribute("x",posx-ctx+10);
86: ttrelem.setAttribute("y",posy-cty-20+10);
87: ttrelem.setAttribute("width",maxbreite+2*(maxbreite-sollbreite)+3);
88: ttrelem.setAttribute("height",anz*15+3);
89: ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px");
90:
91: for(i=1;i<=anz;i++)
92: {
93: texte.item(i).firstChild.data=neu[i-1];
94:
95: texte.item(i).setAttribute("x",posx-ctx+15);
96: texte.item(i).setAttribute("y",parseInt(i-1)*15+posy-cty+3);
97: texte.item(i).setAttribute("style","fill: #00C; font-size: 11px");
98: }
99:
100: svgdoc.getElementById("tooltip").style.setProperty("visibility","visible","");
101: }
102:
103:
104: function HideTooltip()
105: {
106: svgdoc.getElementById("tooltip").style.setProperty("visibility","hidden","");
107: }
108:
109:
110: function ZoomControl()
111: {
112: var curzoom;
113:
114: curzoom=svgroot.currentScale;
115: svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
116: }
117:
118: ]]>
119: </script>
120:
121: </defs>
122:
123: <text x="20" y="30" style="fill: #000; font-size: 24px">
124: Mehrzeiligen Tooltip bei Mausbewegung anzeigen</text>
125:
126: <rect x="50" y="70" width="150" height="80"
127: style="fill: #F00" onmousemove="ShowTooltipMZ(evt,'Das ist ein ganz schön langer Text, der sogar noch länger sein könnte und auf dem roten Rechteck erscheint.')" onmouseout="HideTooltip(evt)"/>
128:
129: <circle cx="130" cy="210" r="30"
130: style="fill: #090" onmousemove="ShowTooltipMZ(evt,'Dieser Tooltip erscheint auf dem grünen Kreis und ist nicht ganz so lang.')" onmouseout="HideTooltip(evt)"/>
131:
132: <g id="tooltip" style="visibility: hidden"><!-- Tooltip - Beginn (ttr=Tooltip-Rechteck, ttt=Tooltip-Text) -->
133: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"/>
134: <text id="ttt" x="0" y="0" style="font-size: 12px; visibility: hidden">dyn. Text</text>
135: <text x="-10" y="-10">dyn. Text</text>
136: <text x="-10" y="-10">dyn. Text</text>
137: <text x="-10" y="-10">dyn. Text</text>
138: <text x="-10" y="-10">dyn. Text</text>
139: <text x="-10" y="-10">dyn. Text</text>
140: </g><!-- Tooltip - Ende -->
141:
142: </svg>
[zum Anfang]
