在SVG中如何显示鼠标提示框

SVG代码如下：

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" onload ="getSVGDoc(evt)"  onzoom="ZoomControl()">

  <script xlink:href="tool_tip.js" type="text/javascript"/>

  <g id="testG" onmouseover = "ShowTooltip(evt, 'Welcome To Here!')" onmouseout = "HideTooltip(evt)">

    <rect x="100" y="100" width="100" height="50" style="fill:rgb(120,255,255);"/>

  </g>

  <g id="tooltip" style="pointer-events: none">

    <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"

      style="visibility: hidden"/>

    <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>

  </g>

</svg>

在SVG中使用的脚步文件tool_tip.js如下：

var svgdoc,svgroot,ttrelem,tttelem,tt;

function getSVGDoc(load_evt)
{
  svgdoc = load_evt.target.ownerDocument;
  svgroot = svgdoc.documentElement;
  ttrelem = svgdoc.getElementById("ttr");
  tttelem = svgdoc.getElementById("ttt");
  // tt=svgdoc.getElementById("tooltip");
}

function ShowTooltip(e, txt)
{
  var posx, posy, curtrans, ctx, cty;
 
  posx = e.clientX;
  posy = e.clientY;
  curtrans = svgroot.currentTranslate;
  ctx = curtrans.x;
  cty = curtrans.y;
 
  tttelem.childNodes.item(0).data = txt;
  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: #0000CC; font-size: 11px; visibility: visible");
  ttrelem.setAttribute("style", "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");
}

function HideTooltip()
{
  // tt.style.setProperty("visibility","hidden","");
  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+")");
}

在IE6中显示如下图：

在这里解决的由于平移和缩放后造成提示框相应平移和缩放的bug。