如何在 SVG 图像上创建弹出气球？

Question

我有一个 SVG 图像，它是一张地图，我想在地图的某些部分使用悬停操作，该操作将显示一个弹出气球，其中包含有关该部分的一些信息，以及一个将客户端重定向到另一个页面的按钮。 我使用添加的 CSS 类获取了地图部分，并尝试使用绝对显示制作一个 div，但它看起来没有响应并根据屏幕大小更改位置。 有没有办法让它在 SVG 图像之上负责？

Answer 1

所以如果你把一些 div 放在绝对位置，你可以对窗口大小调整做出反应。 弹出后只是钩子函数位置你气球和更新窗口调整大小事件的位置，（你可以通过 lodash/throttle 来限制它）。如果你不想使用 js，你可以尝试通过 css calc 和窗口的宽度或者你'重新 svg 容器。 给我们代码示例然后有人可以告诉你更多。

Answer 2

您可以使用<title>content</title>作为 SVG 代码的一部分，以包含文本数据作为提示（浏览器将显示标准工具提示）。

此外，您可以添加事件来跟踪指针位置并在那里放置一些自定义工具提示。

 var elements=document.getElementsByClassName("hint"); var tooltip=document.getElementById("tooltip"); for(var i=0; i<elements.length; i++){ elements[i].addEventListener('mousemove', function(ev){ //console.log('move',ev.offsetX,ev.offsetY); tooltip.innerHTML=ev.target.firstChild.textContent; tooltip.style.left=ev.pageX+"px"; tooltip.style.top=(ev.pageY+20)+"px"; tooltip.style.display='block'; }) elements[i].addEventListener('mouseout', function(ev){ //console.log('out',ev.offsetX,ev.offsetY); tooltip.innerHTML=ev.target.firstChild.textContent; }) };

 circle{ border: 1px solid #ff0; } #tooltip{ position: absolute; background-color: #fff; padding:4px; width: 50px; z-index: 1; display: none; }

 <div> <div>Interactive SVG Example</div> <div id="tooltip"></div> <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" ><title>Black</title></rect> <circle class="hint" cx="150" cy="100" r="30" fill="blue" ><title>blue</title></circle> <circle class="hint" cx="250" cy="100" r="20" fill="red" ><title>red</title></circle> </svg> </div>