在 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 元素上時,瀏覽器會顯示該工具提示。