9

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

4

1 回答 1

19

标题元素应该在 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-24T22:19:41.203 回答