如何获取JavaScript生成的标题工具提示SVG显示

我想获得SVG元素的工具提示。（测试Firefox下16.0.2）我想这个小例子，它工作得很好：如何获取JavaScript生成的标题工具提示SVG显示

<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工具提示，而且也可通过JavaScript产生SVG。因此，正如第一测试中，我试图产生仅仅是工具提示：

<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生成的标题，除了当我鼠标移到矩形没有工具提示！我究竟做错了什么？

来源

2012-11-24 Michael

标题元素应该在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>

来源

2012-11-24 22:19:41

如果我们把'title'放在'use'里面，它会起作用吗？ – codenamezero

@codenamezero你的意思是像''，或者你的意思是在使用引用的元素标题？在这两种情况下：只要尝试一下，随时就您的发现进行报告。 –

是的，''是这样做的正确方法，因为我没有得到标题显示？ – codenamezero

如何获取JavaScript生成的标题工具提示SVG显示

回答

相关问题