我正在尝试获取SVG元素的工具提示. (在Firefox 16.0.2下测试)我尝试了这个小例子,它运行正常：
<svg xmlns="http://www.w3.org/2000/svg"> <rect id="test" x="20" y="30" width="200" height="150"> <title>Test tooltip</title> </rect> </svg>
但是,我需要从javascript生成工具提示,因为SVG也是从javascript生成的.所以就像第一次测试一样,我尝试只生成工具提示：
<script type="text/javascript">
function test(text) {
var title = document.createElement("title")
title.text = text
document.getElementById("test").appendChild(title)
}
</script>
</head>
<body onload="test('Test tooltip')">
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="test" x="20" y="30" width="200" height="150">
</rect>
</svg>
当我检查来自Firefox的结果时,标题对象看起来与从HTML / SVG生成的标题相同,只是当我将鼠标悬停在矩形上时没有工具提示！我究竟做错了什么？
解决方法
title元素应该在SVG名称空间中,而不是默认名称空间.因此,您应该使用createElementNS().此外,SVG标题元素没有text属性.请改用textContent.所以,这应该工作：
<script type="text/javascript">
function test(text) {
var title = document.createElementNS("http://www.w3.org/2000/svg","title")
title.textContent = text
document.getElementById("test").appendChild(title)
}
</script>
</head>
<body onload="test('Test tooltip')">
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="test" x="20" y="30" width="200" height="150">
</rect>
</svg>
