用於SVG元素的Javascript工具提示

Question

我有一個SVG，它用作頂級欄和一些標題。它由許多帶有一些文本的矩形組成，我希望在用戶將它們移動時爲每個矩形提供工具提示。

我試圖實現類似this的東西，但我需要將.js代碼保存在單獨的文件中，因爲我正在動態生成我的svg文件。但是，當我將鼠標懸停在我的元素（svg中的矩形）時沒有任何反應。我認爲在腳本中引用我的svg的問題非常嚴重，但我不確定哪裏出了什麼問題。

這裏是我的代碼〔實施例（我刪除了一些非重要組成部分，以保持它的可讀性。）

SVG：

<svg contentScriptType="text/ecmascript" width="760" 
    xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" 
    height="140" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" 
     onload="init(evt)" version="1.0"> 
    <script xlink:href="script.js" xlink:actuate="onLoad" xlink:type="simple" xlink:show="other" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink"/><rect x="0" width="120" height="140" y="0" 
    style="fill:#DEE7EF"/><rect x="120" y="0" width="30" style="fill:#9CAAC6" 
    onmouseout="HideTooltip(evt)" height="140" onmousemove="ShowTooltip(evt, 
    &apos;BlueServiceESB#BlueListener&apos;)"><text fill="black" x="0" id="tooltip" font- 
    size="10" y="0" visibility="hidden">BlueServiceESB#BlueListener</text></rect></svg> 

我知道這可能看起來很奇怪，如果是的話，我會嘗試一些其他的東西來代替我的文本元素，使其更具可讀性，讓我知道在評論...

我的script.js文件

// tooltip 
function ShowTooltip(evt, mouseovertext) 
{ 
    tooltip.setAttribute("x",evt.clientX+11); 
    tooltip.setAttribute("y",evt.clientY+27); 
    tooltip.firstChild.data = mouseovertext; 
    tooltip.setAttribute("visibility","visible"); 
} 

function HideTooltip(evt) 
{ 
    tooltip.setAttribute("visibility","hidden"); 
} 

// init for tooltip functions 
function init(evt) 
{ 
    if (window.svgDocument == null) 
    { 
    svgDocument = evt.target.ownerDocument; 
    } 

    tooltip = svgDocument.getElementById('tooltip'); 

} 

你能告訴我我在做什麼錯嗎？非常感謝！

Answer 1

刪除init函數，每次只找到工具提示元素。所以，你的腳本將是這樣的：

function ShowTooltip(evt, mouseovertext) { 
    var tooltip = document.getElementById('tooltip'); 
    tooltip.setAttribute("x", evt.clientX + 11); 
    tooltip.setAttribute("y", evt.clientY + 27); 
    tooltip.firstChild.data = mouseovertext; 
    tooltip.setAttribute("visibility", "visible"); 
} 

function HideTooltip(evt) { 
    var tooltip = document.getElementById('tooltip'); 
    tooltip.setAttribute("visibility", "hidden"); 
} 

我覺得也有一對夫婦與SVG（的可能，因爲這樣它產生的）問題。最重要的一點是不要將text包裝在rect元素中。這個工程：

<svg width="760" height="140" xmlns="http://www.w3.org/2000/svg" version="1.0"> 

     <rect x="0" width="120" height="140" y="0" style="fill:#DEE7EF" /> 
     <rect x="120" y="0" width="30" height="140" style="fill:#9CAAC6" 
      onmouseout="HideTooltip(evt)" 
      onmousemove="ShowTooltip(evt, &apos;BlueServiceESB#BlueListener&apos;)" /> 

     <text x="0" y="0" width="20" height="10" fill="black" id="tooltip" font-size="10" visibility="hidden">BlueServiceESB#BlueListener</text> 
    </svg> 

Answer 2

1）首先你應該使用';' （式= 「填充：＃9CAAC6;」）在風格屬性和每JS代碼（的onmouseout = 「HideTooltip（EVT）;」）

2）改變

onmouseout="HideTooltip(evt)" 

到

onmouseout="HideTooltip(evt); return false;" 

3）我認爲，簡單易用的jQuery，而不是本地的js

I）添加一個id爲你的形狀（在你的情況RECT）

ii）作出

$('#rect_id').on('mouseover',function(e){ 
    // do your stuff here 
}); 
$('#rect_id').on('mouseout',function(e){ 
    // do your stuff here 
}); 

舉個例子看看http://jqvmap.com/。工具提示在那裏執行，就像我上面寫的那樣。