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

はあなたに有用である可能性があるページですbtw）。 –

A DIV SVG要素に関連するデータを示すの最も多様な手段である。ここでSVGファイルのサンプルコードです。要素を強調表示することができ、DIVには要素に関連付けられた関連データを含めることができます。 DIVは、Webページのスクロール位置を考慮して要素に配置されます。以下は基本的な例です。 http://www.petercollingridge.co.uk/interactive-svg-components/tooltip（1分のGoogle検索で見つかった：ここ

<!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内のホバー上でカスタムツールチップボックスを取得するには？

答えて

関連する問題