在SVG中如何显示鼠标提示框
来源:互联网 发布:如何设计一门编程语言 编辑:程序博客网 时间:2024/06/05 04:59
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;
在IE6中显示如下图: 在这里解决的由于平移和缩放后造成提示框相应平移和缩放的bug。
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+")");
}
- 在SVG中如何显示鼠标提示框
- 如何在myeclipse中取消鼠标覆盖提示功能?
- 鼠标提示——在鼠标当前位置显示提示信息
- 鼠标提示——在鼠标当前位置显示提示信息
- 在salesforce中实现鼠标悬停显示提示框效果,并对显示框内容进行微缩页面布局
- svg文件在不同浏览器中显示有差异svg
- 鼠标划入显示提示框
- 如何在svg中保留文字空格
- 如何在SVG中使用对话框
- 如何在html中使用svg
- 如何在HTML5中使用SVG
- C#中怎样在Button控件上添加提示语,让鼠标经过按钮时显示提示信息!
- Delphi中如何将鼠标放置在控件上就给予提示信息
- c#.net中如何实现将鼠标放在按钮上,出现提示文字?
- jquery 鼠标悬停显示信息提示框
- 关于SVG文件在Firefox中正确显示的研究
- 关于SVG文件在Firefox中正确显示的研究
- 润乾实现引入svg并显示在页面中
- Microsoft .NET Framework 精简版多线程提示
- 您也使用托管C++吗?
- .Net面试最新
- 9.18与日语学习
- 指针数组,数组指针,以及函数指针,以及堆中的分配规则
- 在SVG中如何显示鼠标提示框
- windows ce下playsound播放失败的原因
- J2SE5.0的新特性:ProcessBuilder
- .NET平台下WEB应用程序的部署(安装数据库和自动配置)
- sqlserver如何使用数据链路查询
- .Net中的反射使用入门
- Sending e-mail from Oracle Server in 10g
- 第三课 WebSphere Studio应用开发
- 事务入门