javascript - 在 SVG 世界地图上叠加工具提示样式数据

Question

我有一个 SVG 世界地图(基于 public domain file from wikipedia )，并使用生成的 CSS 来突出显示各个国家/地区。

我需要添加包含每个国家/地区其他数据的鼠标悬停工具提示，这些数据将由 PHP 提供。

我是一名经验丰富的 Web 程序员，但迄今为止从未使用过 SVG。在用户鼠标下显示文本工具提示以及有关鼠标光标下特定 SVG 节点的信息的最佳方法是什么？

请注意，这个 SVG 充满了很好的 id 和 class 属性，旨在促进这种使用。

我需要尽可能跨浏览器，但很高兴禁用某些浏览器(旧版本的 Internet Explorer)的该功能。

Answer 1

1. 检测鼠标悬停事件
2. 访问title信息
3. 创建或显示一组标题元素
   • 将它们附加到 SVG 文档的末尾，以便 draw above all other content
4. 根据标题使用适当的数据填充元素
5. 相应地定位元素
   • 您需要将光标点从屏幕空间转换为 SVG 空间，或者计算源元素的边界框并将其从可能转换的对象空间转换为全局 SVG 空间。
6. 检测鼠标移出事件
7. 隐藏或销毁标题元素。

上述内容中有哪些部分是您无法完成的吗？

---

编辑:回答以下评论中的大量问题:

1. 您可以将脚本放置在 SVG 内部或嵌入 HTML 的外部；如果它们独立于 SVG(就像您的那样)，最好将它们放置在这里，以便您可以将 SVG 嵌入外部并使其仍然有效。

2. 找到任何东西的列表是最容易的，你可以放置一个共同的class="foo"通过以下之一对它们进行属性:

   var foos = document.querySelectorAll('.foo');
   var foos = document.getElementsByClassName('foo');
   

   或者可以根据结构查询；例如，如果每个国家/地区都是 <path>包含在 <g id="countries"> 中那么你可以使用:

   var countries = document.querySelectorAll('#countries path');
   

   但是，如果您拥有的只是一个 ID 数组，那么您需要执行以下操作:

   var countryIDs = [ "usa", "brazil", … ];
   
   // Old school
   var countries = [];
   for (var i=countryIDs.length; i--; ){
     countries[i]=document.getElementById(countryIDs[i]);
   }
   
   // New school
   var countries = countryIDs.map(function(id){
     return document.getElementById(id);
   });
   

3. 为每个事件附加一个事件处理程序:

   function showTooltip(evt){
     var element = evt.target;
     // your code here
   }
   
   countries.forEach(function(el){
     el.addEventListener('mouseover',showTooltip,false);
   });
   

   或者，您可以将事件处理程序附加到一个公共(public)祖先一次，然后在那里处理它:

   svg.addEventListener('mouseover',function(evt){
     var element = evt.target;
     if (element.hasAttribute('title')){
       // your code here
     }
   }
   

4. <script>当放在 </svg> 之前最简单，但是如果您愿意，您可以将其放在顶部，并且它仅在文件加载完成后才起作用，例如:

   window.addEventListener('load',function(){
     // Put all your code here
   },false);
   

5. 很容易找到有关嵌入 SVG 的信息，而且你是对的，有很多方法可以做到这一点。这是一个 nice article about it 。我个人主张 SVG in XHTML或者，如果必须的话，SVG in HTML5 .