SVG – Learning by Coding

[ tooltip_mehrzeilig.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 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-Rechteckttt=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">dynText</text>
135:     <text x="-10" y="-10">dynText</text>
136:     <text x="-10" y="-10">dynText</text>
137:     <text x="-10" y="-10">dynText</text>
138:     <text x="-10" y="-10">dynText</text>
139:     <text x="-10" y="-10">dynText</text>
140:   </g><!-- Tooltip Ende -->
141: 
142: </svg>

[zum Anfang]