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

最简单的方法是使用UAs变成工具提示的标题元素。

<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>

在svg路径中悬停时的一些弹出文本

1 个答案: