-- 发布时间：9/17/2006 10:28:00 AM
-- 用了一天，终于解决了在SVG下鼠标提示框正常显示问题
在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 + 5);
ttrelem.setAttribute("y", posy - cty + 20);
tttelem.setAttribute("x", posx - ctx + 10);
tttelem.setAttribute("y", posy - cty + 32);
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。
