Question

我正在尝试获取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生成的标题相同，除了当我鼠标悬停在矩形上时没有工具提示！我做错了什么？

Answer 1

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>

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

1 个答案: