在SVG世界地图上覆盖工具提示样式数据

我有一个世界SVG地图（基于public domain file from wikipedia），生成的CSS用于突出显示各个国家/地区。在SVG世界地图上覆盖工具提示样式数据

我需要添加包含有关每个国家/地区的额外数据的mouseover工具提示，数据将由PHP提供。

我是一位经验丰富的网络程序员，但从未与SVG合作过。在用户的鼠标下显示文本工具提示的最佳方法是什么，有关鼠标光标下特定SVG节点的信息？

请注意，此SVG充满了很好的id和class属性，旨在促进此类用途。

我需要这个跨浏览器，但很高兴为某些浏览器（旧版本的Internet Explorer）禁用该功能。

来源

2012-05-01 Abhi Beckert

http://www.mecxpert.de/svg/tooltips.html – Phrogz

检测鼠标悬停事件
访问title信息
创建，或出现一组标题元素的
- 他们追加到SVG文件的结尾，让他们draw above all other content
使用基于标题的适当数据填充元素
将ele因此
- 您需要将光标点从屏幕空间转换为SVG空间，或者计算源元素的边界框并将其从可能转换的对象空间转换为全局SVG空间。
检测mouseout事件
隐藏 - 或破坏的标题元素。

有没有上述的任何部分，你不能做？

编辑：回答从下面的评论的问题财富：

您可以将SVG内部或外部的嵌入HTML脚本;如果它们对SVG是独立的（像你一样），最好把它们放在这里，这样你就可以在外部嵌入你的SVG并使它仍然工作。

找到的任何东西的清单是最简单的放置一个共同class="foo"属性在他们身上，通过之一：

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

，也可以查询基于结构;例如，如果每一个国家是<g id="countries">内包含那么你可以使用一个<path>：

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); 
});

要附加一个事件处理每个：

function showTooltip(evt){ 
    var element = evt.target; 
    // your code here 
} 

countries.forEach(function(el){ 
    el.addEventListener('mouseover',showTooltip,false); 
});

或者，你可以附上事件处理到一个共同的祖先曾经和HANDL E - 这有：

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

的<script>的</svg>前右侧放置的时候是最容易的，但你可以把它的顶部，如果你想和它只能做其工作时，该文件被加载完成，例如：
```
window.addEventListener('load',function(){ 
    // Put all your code here 
},false); 
```
很容易找到关于嵌入SVG的信息，而且您是对的，有很多方法可以做到这一点。这里有一个nice article about it。我个人主张SVG in XHTML，或者如果您必须，SVG in HTML5。

来源

2012-05-01 01:15:19 Phrogz

我应该能够制定出大部分。是否最好将脚本标签放在SVG文件中？如何找到国家/地区节点列表（通过其“id”属性）并将“鼠标移动”事件附加到它们？该脚本是否需要在SVG的末尾？将SVG嵌入HTML页面的最佳方式是什么？似乎有几种方法可以做到这一点。顺便说一句，mecxpert.de的例子失败，一个XML解析错误，所以我不能尝试它。 –

查看我更新的问题。将来，请在特定的单个堆栈溢出问题中询问具体的个别问题。 – Phrogz

谢谢你。回复：具体的问题，我不知道哪一个具体的问题，而不先问一般问题。我可能会开新的问题，但你完成了“你有什么不可以做的部分吗？” –

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-21 09:55:45

有没有一种简单的方式来设置svg：title popup？ – pmont

@pmont更好的你可以看看nvd3.js。您可能会获得丰富的工具提示选项http://nvd3.org/ghpages/line.html –

谢谢。我研究了NVD3是如何实现的，他们为工具提示创建了一个div。这使他们可以用CSS来设计它。这样做并不像svg：title那么直接，但它是一个选项。 – pmont

在SVG世界地图上覆盖工具提示样式数据

回答

相关问题