在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世界地圖上覆蓋工具提示樣式數據

回答

相關問題