Question

我有一张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>

Answer 1

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

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

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

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

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

Answer 2

将适当的ID添加到<title>：

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

在<svg>标签上，添加：

aria-labelledby="uniqueTitleID"（使用标题ID）

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

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

2 个答案: