HTML中的SVG <img/>,鼠标悬停</title>上未显示<title>工具提示

时间:2015-03-07 16:46:02

标签: html svg

我有一张SVG图片,其中包含&lt; title&gt;用作工具提示的元素。 当我在Mozilla中加载SVG时,工具提示会正确显示。

但是,当我在HTML文档中使用SVG时,通过&lt; img&gt;元素,鼠标悬停时不显示工具提示。

是否可以正确显示工具提示?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>SVG in HTML title test</title>
  </head>

  <body>
    <img src="test.svg" />
  </body>
</html>

和SVG

<?xml version="1.0" encoding="iso-8859-1" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100">
  <title>SVG in HTML test</title>
  <g>
    <polygon stroke="black" stroke-width="1" fill="#0000ff" points="20,20 40,20 40,40 20,40" />
    <title>rectangle</title>
  </g>

  <g>
    <circle stroke="black" stroke-width="1" fill="#ff0000" cx="70" cy="70" r="10" />
    <title>circle</title>
  </g>
</svg>

2 个答案:

答案 0 :(得分:0)

您可以尝试使用object代码,但这可能不适用于所有浏览器,我认为它仅适用于支持HTML5的代码:

<object type="image/svg+xml" data="test.svg">Browser doesn't support SVG</object>

或者,我不是这方面的忠实粉丝,但您可以尝试使用iframe

<iframe src="test.svg"></iframe>

这也适用于较旧的浏览器......这两种方法都应显示tooltips标记定义的title。我和你一起做了一个快速(成功)的测试。

答案 1 :(得分:0)

将适当的ID添加到<title>

<title id="uniqueTitleID">SVG in HTML title test</title>

<svg>标签上,添加:

aria-labelledby="uniqueTitleID"(使用标题ID)

标题应包含在aria-labeledby中,因为它比aria-labeledby具有更好的屏幕阅读器支持