如何將工具提示添加到svg圖形？

我有一系列svg矩形（使用D3.js），我想在鼠標懸停上顯示一條消息，消息應該被一個充當背景的框包圍。它們應該完全對齊到矩形（頂部和居中）。做這個的最好方式是什麼？如何將工具提示添加到svg圖形？

我嘗試使用「x」，「y」，「width」和「height」屬性添加一個svg文本，然後添加一個svg矩形。問題是文本的參考點位於中間（因爲我希望它居中對齊，我使用text-anchor: middle），但對於矩形它是左上角的座標，再加上我想在文本上留下一點空白的痛苦。

另一種選擇是使用html div，這會很好，因爲我可以直接添加文本和填充，但我不知道如何獲取每個矩形的絕對座標。有沒有辦法做到這一點？

來源

2012-05-17 nachocab

如果沒有別的辦法，我想 – nachocab

這是個問題，使用標記來設計它的目的？ – Phrogz

這只是它看起來不太好，但我很欣賞你的答案 – nachocab

您可以使用標題元素作爲Phrogz指示。也有像jQuery的醉意http://onehackoranother.com/projects/jquery/tipsy/（可用於替代所有title元素），鮑勃·蒙特維的nvd3一些很好的提示，甚至是Twitter的提示從他們的引導http://twitter.github.com/bootstrap/

來源

2012-05-17 21:06:19 paxRoman

您可以簡單地使用SVG <title> element以及它傳達的默認瀏覽器渲染嗎？（注：這是不一樣title屬性，你可以在DIV使用/ IMG /跨度在HTML，它需要一個孩子元素命名title）

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

或者，如果你真的想在你的SVG顯示HTML，你可以直接嵌入HTML：

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
} 
 

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

...但是然後你需要JS來打開和關閉顯示。如上所示，使標籤出現在正確位置的一種方法是將rect和HTML包裝在同一個<g>中，以將它們放在一起。

要使用JS查找SVG元素在屏幕上的位置，可以使用getBoundingClientRect()（例如， http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

來源

2012-05-17 21:06:16 Phrogz

很適合我插入標題到svg元素！ –

很好的答案。但請注意'foreignObject' [在Internet Explorer中不受支持]（https://caniuse.com/#search=foreignObject） –

如何將工具提示添加到svg圖形？

回答

相關問題