<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="getSVGDoc(evt)" onzoom="ZoomControl()">
  <title>SVG - Learning By Coding</title>
  <defs>

    <script type="text/javascript">
      <![CDATA[

       var svgdoc,svgroot;


       function getSVGDoc(load_evt)
       {
         svgdoc=load_evt.target.ownerDocument;
         svgroot=svgdoc.documentElement;
       }


       function ShowTooltip(mousemove_event)
       {
         var ttrelem,tttelem,posx,posy,curtrans,ctx,cty,txt,ttRect_ico;

         ttrelem=svgdoc.getElementById("ttr");
         tttelem=svgdoc.getElementById("ttt");
         ttRect_ico = svgdoc.getElementById("Rect_ico");

         posx=mousemove_event.clientX;
         posy=mousemove_event.clientY;

         txt="x="+posx+" | y="+posy;
         tttelem.childNodes.item(0).data=txt;

         curtrans=svgroot.currentTranslate;
         ctx=curtrans.x;
         cty=curtrans.y;

         ttRect_ico.setAttribute("x", posx-ctx);
         ttRect_ico.setAttribute("y", posy-cty);
         
         ttrelem.setAttribute("x",posx-ctx);
         ttrelem.setAttribute("y",posy-cty-20);
         
         tttelem.setAttribute("x",posx-ctx+5);
         tttelem.setAttribute("y",posy-cty-8);
         
         ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10);
         
         tttelem.setAttribute("style","fill: #00C; font-size: 11px; visibility: visible");
         ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px;           visibility: visible");
       }


       function HideTooltip()
       {
         var ttrelem,tttelem;

         ttrelem=svgdoc.getElementById("ttr");
         tttelem=svgdoc.getElementById("ttt");
         ttrelem.setAttribute("style","visibility: hidden");
         tttelem.setAttribute("style","visibility: hidden");
       }


       function ZoomControl()
       {
         var curzoom;

         curzoom=svgroot.currentScale;
         svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
       }
       ]]>
    </script>
  </defs>
  
  <text x="20" y="30" style="cursor: help;fill: #000; font-size: 24px">
    Tooltip bei Mausbewegung anzeigen
  </text>
  <text x="30" y="435" style="cursor: help">help</text>
  <rect x="20" y="50" width="500" height="300" style="cursor: crosshair;fill: #FFF; stroke: #000" onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip()"/>
  
  <g id="tooltip">
    <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: visiable"/>
    <rect id="Rect_ico" rx="5" ry="5" x="0" y="0" width="10" height="10" fill="red" style="visibility: visiable"/>
    <text id="ttt" x="0" y="0" style="visibility: visible">dyn. Text</text>
  </g>
</svg>