SVG – Learning by Coding

[ tooltip.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)" 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:           visibilityvisible");
 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-Rechteckttt=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">dynText</text>
 98:   </g><!-- Tooltip Ende -->
 99: 
100: </svg>

[zum Anfang]