SVG的自定义路径标题

时间:2016-07-08 14:43:54

标签: html css css3 svg

我正在制作一个svg,我想知道是否有可能在悬停某些元素时轻松弹出工具提示。

我发现属性标题在使用时可用:

<path>
    <title>Custom title</title>
</path>

然后我考虑自定义title元素,以便它可以更快地生成,具有不同的背景等......

所以我尝试了不同的东西:

path[title]:hover:after { instructions }

但不幸的是它似乎没有用。

有人知道从路径元素中自定义标题的简单方法吗?

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

第二次编辑(ARRGGHH!):

网站:http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip展示了如何按照您的需要设置工具提示的样式。

编辑:

对于路径的SVG工具提示,它是这样的:

  <path d="M150 0 L75 200 L225 200 Z">
     <title>This is a traingle</title>
  </path>

希望这有效,因为我测试了它。

===========

如果您想在图像元素上使用工具提示,请执行以下操作:

<img title="tooltip text"></img>

其他事情也一样。

另外,当您在css中放置括号时,即放置:

path[attribute=value]

所以你想要:

path title:hover:after { 
  // styling 
} 

我很乐意提供帮助。希望这有效!