2

我有一张世界的 SVG 地图（基于来自 wikipedia 的公共域文件），并带有生成的 CSS 以突出显示各个国家。

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

我是一位经验丰富的网络程序员，但直到现在还没有使用过 SVG。在用户鼠标下显示文本工具提示的最佳方法是什么，以及有关鼠标光标下特定 SVG 节点的信息？

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

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

4

2 回答 2

4
  1. 检测鼠标悬停事件
  2. 访问title信息
  3. 创建或显示一组标题元素
  4. 根据标题用适当的数据填充元素
  5. 相应地定位元素
    • 您需要将光标点从屏幕空间转换为 SVG 空间，或计算源元素的边界框并将其从可能转换的对象空间转换为全局 SVG 空间。
  6. 检测 mouseout 事件
  7. 隐藏或销毁标题元素。

上面有没有你不能做的部分？

编辑：从以下评论中回答大量问题：

  1. 您可以将脚本放置在 SVG 内部或嵌入 HTML 外部；如果它们独立于 SVG（就像你的那样），最好将它们放在这里，这样你就可以在外部嵌入你的 SVG 并让它仍然工作。

  2. 查找任何内容的列表是最容易的，您可以class="foo"通过以下方式之一在它们上放置一个通用属性：

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

    或者可以根据结构查询；例如，如果每个国家/地区都<path>包含在 a 中，<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);
});

    或者，您可以将事件处理程序附加到一个共同的祖先一次，然后在那里处理它：

    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 的信息，你是对的，有很多方法可以做到这一点。这是一篇关于它的好文章。我个人提倡XHTML 中的 SVG，或者，如果必须的话，HTML5 中的 SVG。

于 2012-05-01T01:15:19.473 回答
0 
You can use append svg title to view additional data.
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip   
        .append("svg:title")
          .text(function(d) {return "Name:"+d.Name;}); 
We can use this tooltip along with all svg element. Here d is a json object form this we are parsing the data.

https://gist.github.com/ilyabo/1339996

于 2013-08-21T09:55:45.347 回答