如何獲得懸停在SVG內的自定義工具提示框？

我有一個SVG格式的地圖，裏面顯示了很多城市。我想要做的是，只要鼠標懸停在城市上，它就會顯示一些細節，它本身應該在HTML div中。如何獲得懸停在SVG內的自定義工具提示框？

這裏是我想要的演示：http://www.nytimes.com/elections/results/senate

我不知道該怎麼做，無論是我能找到答案。這裏是SVG文件的示例代碼：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="356 432 235 237"> 
    <g title="Uttar Pradesh" fill="#ccc"> 
    <path d="M 402.80505,648.30477 C 400.84581" fill="rgb(255,166,46)"/> 
    <path d="M 402.80505,648.30477 C 400.84581" fill="rgb(255,166,46)"/> 
    ... 
    </g> 
</svg>

來源

2017-02-24 Tech Team

這裏是一個網頁，可能對你有用：http://www.petercollingridge.co.uk/interactive-svg-components/tooltip（有一分鐘的谷歌搜索發現BTW）。 –

甲DIV，即放置在聯SVG，是示出與SVG元素數據的最多樣化的裝置。該元素可以高亮顯示，並且DIV可以包含附加到該元素的關聯數據。考慮到網頁滾動的位置，DIV位於元素處。下面是一個基本的例子。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>ToolTip With DIV</title> 
 

 
</head> 
 
<body style='font-family:arial'> 
 
<center> 
 
<b>ToolTip With DIV</b><br /><br /> 
 
Below are 3 elements with an onmouseover event and their data attribute.<br /> 
 
<br /> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
A DIV, that is placed over the inline SVG, is the most diversified means of showing data related to an SVG element. The element can be highlighted and the DIV can 
 
include the associated data attached to the element. The DIV is positioned at the element taking into consideration the web page scrolled position. 
 
</div> 
 
<p></p> 
 
<div id="svgDiv" style='background-color:gainsboro;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400"> 
 
<circle onmouseover=showMyTooltip(evt) cx=150 cy=150 r=60 fill=red stroke="black" stroke-width="0" data="I am a Circle" /> 
 
<rect onmouseover=showMyTooltip(evt) x=200 y=200 width=60 height=60 fill=lime data="I am a Rectangle" stroke="black" stroke-width="0" /> 
 
<ellipse onmouseover=showMyTooltip(evt) cx=300 cy=300 rx=60 ry=20 fill=blue data="I am an Ellipse" stroke="black" stroke-width="0" /> 
 
</svg> 
 
</div> 
 
<div id=tooltipDiv style='background:white;padding:5px;position:absolute;top:0px;left:0px;visibility:hidden'></div> 
 

 
</body> 
 
<script> 
 

 
var PreviousElement 
 
//---mouseover element-- 
 
function showMyTooltip(evt) 
 
{ 
 
    var target = evt.target 
 
    if(!PreviousElement||PreviousElement!=target) //--prevent 'stutter'--- 
 
    { 
 
     if(PreviousElement) //---remove highlight (stroke) --- 
 
      PreviousElement.setAttribute('stroke-width',0) 
 

 
     target.setAttribute('stroke-width',3) 
 
     var myData=target.getAttribute("data") 
 

 
     tooltipDiv.innerHTML=myData 
 

 
     var x = evt.clientX; 
 
     var y = evt.clientY; 
 

 
     var scrollX = window.pageXOffset 
 
     var scrollY = window.pageYOffset 
 

 
     var divLeft=x+5+scrollX+"px" 
 
     var divTop=y+5+scrollY+"px" 
 

 
     tooltipDiv.style.left=divLeft 
 
     tooltipDiv.style.top=divTop 
 
     tooltipDiv.style.visibility="visible" 
 
     PreviousElement=target 
 
    } 
 
} 
 

 
</script> 
 

 
</html>

來源

2017-02-24 20:40:03

如何獲得懸停在SVG內的自定義工具提示框？

回答

相關問題