SVG ID名称出现在mouseover上

Question

我以地图的形式创建了几个svg形状。

我想要发生的是，当您将鼠标悬停在相应的形状上时，形状的标题/名称显示在下方。

因此，如果我将鼠标悬停在代表英里道路的矩形上，Mile end road应该出现在SVG形状下方。

我该怎么做？

我已经尝试添加此：

<script> 
    var elem = document.getElementById("qmul-map"); 
    elem.innerHTML = myMile; 
</script> 

但它似乎并没有被做任何事情。

Answer 1

只需使用一个<title>元素...

<rect id="mile_end_road" height="34" width="623" y="377" x="10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"> 
    <title>Mile end road</title> 
</rect> 

等其它元素