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>

ただし、SVGもjavascriptから生成されているため、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

title 要素は、デフォルトの名前空間ではなく、SVG 名前空間にある必要があります。したがって、使用する必要がありますcreateElementNS()。textまた、SVG タイトル要素にはプロパティがありません。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 に答える