一些彈出文本，而懸停在SVG路徑

Question

我想一些示例文本，而懸停在SVG路徑，誰能告訴我最簡單的方法，請

這裏是我的CSS代碼：

<style> 
path:hover{ 
    fill:yellow;stroke:blue; 
}  
.available 
{ 
    fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1 
} 
</style> 

這裏是我的Html SVG代碼：

<svg width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047"> 
    <a href=""><path name="path1" class="available" d="m 97.42857,852.3622 c 0,72.14286 0.71429,72.14286 0.71429,72.14286 l 55,23.57143 -0.71429,-95 z"/></path></a> 
    <path name="path2" class="available" d="m 97.42857,809.50506 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/> 
    <path name="path3" class="available" d="m 97.21429,766.3622 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/> 
</svg> 

Answer 1

最簡單的方法是使用標題元素，將UA轉換爲工具提示。

<svg width="210mm" height="297mm" viewBox="0 1000 744 500"> 
 
    <path fill="red" d="m 97.42857,852.3622 c 0,72.14286 0.71429,72.14286 0.71429,72.14286 l 55,23.57143 -0.71429,-95 z"> 
 
     <title>sample text 1</title> 
 
    </path> 
 
    <path fill="blue" d="m 97.42857,809.50506 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"> 
 
     <title>sample text 2</title> 
 
    </path> 
 
    <path fill="green" d="m 97.21429,766.3622 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"> 
 
     <title>sample text 3</title> 
 
    </path> 
 
</svg>