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

最新推荐文章于 2025-06-26 09:31:21 发布

原创最新推荐文章于 2025-06-26 09:31:21 发布 · 9.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#function #encoding #ie

SVG 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个SVG图形中的提示框如何正确地响应元素的平移和缩放操作，通过JavaScript实现动态调整位置及大小，确保提示框始终准确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

</g>

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

style="visibility: hidden"/>

</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中显示如下图：