有时候我们需要对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);