如何在 SVG 增加類似 html title 屬性的文字提示效果

在 SVG 中，雖然 <path> 元素本身並不支援直接使用 HTML 的 title 屬性來顯示提示框效果，但 SVG 有內建的 <title> 元素，當滑鼠懸停在 <path> 上時，會顯示類似於 HTML 的 title 提示框。

方法：在 <path> 中使用 <title> 元素

你可以將 <title> 元素放在 <path> 裡，這樣當滑鼠懸停在該路徑上時，瀏覽器會顯示工具提示。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定義 path 並加上 title -->
  <path d="M50,50 Q100,25 150,50" stroke="blue" stroke-width="4" fill="none">
    <title>這是一個提示框</title>
  </path>
</svg>

解釋：

• <title>：這個元素放置在 <path> 內，當滑鼠懸停在該路徑上時，會顯示 "這是一個提示框" 作為工具提示。
• 顯示的效果類似於 HTML 中的 title 屬性，通常是瀏覽器自帶的原生工具提示效果。

注意：

• <title> 必須是直接放在 <path> 元素內的子元素。
• 當你將滑鼠移到 SVG 元素上時，瀏覽器會顯示該工具提示。