SVG标签内元素加鼠标tooltip悬浮提示

有时候我们需要对svg图形内的某个标签元素添加类似普通标签title效果的悬浮提示,但是在我们添加title之后把鼠标放上去发现每一点效果,还有一个很奇怪的现象,就是可能你用浏览器的开发者工具动态的为svg内部元素添加title元素,是有效果的,但是你真的把title加到实际代码中再重新刷新页面,title效果又失效了。带着疑问各种百度各种Google解决办法,有人说用x-link:title可以,我们加上,刷新页面依然没有熟悉的悬浮效果。

为什么呢?

其实这里面设计一个作用域的问题,我们直接写在代码中的title是在全局作用域下面的,而不是在svg作用域下面的,要想对svg内的图形添加title效果,我们需要创建一个svg作用域下面的title。以下代码是如何创建一个svg作用域下面的title。


var title = document.createElementNS("http://www.w3.org/2000/svg","title"),
text = document.createTextNode(msg);
title.appendChild(text);
svgelemnt.appendChild(title);

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章