[英]How to show tooltip for text in SVG?
當用戶將鼠標懸停在SVG中的文本上時,我需要一個工具提示。 此外,文本和工具提示內容應該可以使用javascript進行修改。
以下適用於Firefox,但不適用於Chrome。 這樣做的正確方法是什么?
HTML:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
<rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
<text id="text1" x="50" y="15" text-anchor="end">text1</text>
<text id="text2" x="80" y="15" text-anchor="end"
transform="translate(0,50)">text2</text>
</svg>
Javascript(使用jQuery):
$('#text1').attr('title', 'Tooltip 1');
$('#text2').attr('title', 'Tooltip 2');
我的jsfiddle: http : //jsfiddle.net/getvictor/ctaVA/
標題子元素將充當工具提示。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
<rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
<text id="text1" x="50" y="15" text-anchor="end"><title>Tooltip 1</title>text1</text>
<text id="text2" x="80" y="15" text-anchor="end"
transform="translate(0,50)"><title>Tooltip 2</title>text2</text>
</svg>
您可以使用<title>
元素。
請注意,那些使用
<title>
顯示工具提示的實現通常只有在<title>
確實是其父級的第一個子元素時才會這樣做。
來自https://developer.mozilla.org/en/docs/Web/SVG/Element/title
所以,在你的例子中,那就是
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
<title id="title1">This is a tooltip</title>
<rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.