如何获得SVG元素的位置 [英] How to get the position of SVG element
问题描述
好吧,我有这个 svg文件(点击我).现在,当鼠标在元素上方时,我希望工具提示脚本在鼠标旁边显示工具提示,而不是在其所属元素旁边显示.
现在我知道,工具提示的位置由evt.clientX / evt.clientY
给出.但是我找不到能解决问题的函数.
Well I have this svg file (click me). Now I want the tooltip script to show the tooltips not next to the mouse, but next to the element which it belongs to, when the mouse is above the element.
Now i know, that the position of the tooltip is given by evt.clientX / evt.clientY
. But I couldn't find a function, solving my problem.
我希望有人能帮助我...
I hope somebody can help me...
这是我的代码:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
<style>
.tooltip{
font-family: Verdana;
fill:white;
}
.tooltip_bg{
fill: black;
opacity: 0.5;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext){
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.firstChild.data = mouseovertext;
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+11);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt){
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
</a>
<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>
推荐答案
您可以使用rect元素的getBBox方法,如下所示.
并且您应该将标题文本元素的pointerEvents样式值设置为"none".
You can use getBBox method of rect element, like this.
And you should set pointerEvents style value of caption text element to "none".
请参见 http://jsfiddle.net/s0z9o00g/2/
<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
<style>
.tooltip{
font-family: Verdana;
fill:white;
}
.tooltip_bg{
fill: black;
opacity: 0.5;
}
text{
pointer-events:none;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt){
if ( window.svgDocument == null ){
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext){
var el = evt.target;
var bbox = el.getBBox();
//tooltip.setAttributeNS(null,"x",evt.clientX+11);
//tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.setAttributeNS(null,"x",bbox.x + bbox.width +11);
tooltip.setAttributeNS(null,"y",bbox.y + bbox.height+27);
tooltip.firstChild.data = mouseovertext;
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
//tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
//tooltip_bg.setAttributeNS(null,"y",evt.clientY+11);
tooltip_bg.setAttributeNS(null,"x",bbox.x + bbox.width +8);
tooltip_bg.setAttributeNS(null,"y",bbox.y + bbox.height+11);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt){
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
<text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>
<a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
<text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
</a>
<rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>
这篇关于如何获得SVG元素的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!