HTML、<title> 中的 SVG <img> 鼠标悬停时不显示工具提示
SVG <img> in HTML, <title> tooltip not displayed on mouseover
我有一个 SVG 图像，其中包含用作工具提示的
元素。
当我在 Mozilla 中加载 SVG 时，工具提示显示正确。</p>
<p>但是，当我在 HTML 文档中使用 SVG 时，通过 <img> 元素，工具提示不会在鼠标悬停时显示。</p>
<p>是否可以让工具提示正确显示？</p>
<p>HTML是</p>
<pre><code><!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>
</code></pre>
<p>SVG 是</p>
<pre><code><?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>
</code></pre>
</section>
<div>
<section class="answer">
<p>您可以尝试使用 <code>object</code> 标签，但这可能不适用于所有浏览器，我认为它只适用于支持 <code>HTML5</code>:</p> 的浏览器
<pre><code><object type="image/svg+xml" data="test.svg">Browser doesn't support SVG</object>
</code></pre>
<p>或者，我不太喜欢这个，但你也可以尝试使用 <code>iframe</code>:</p>
<pre><code><iframe src="test.svg"></iframe>
</code></pre>
<p>这也适用于较旧的浏览器...这两种方法都应显示由 <code>title</code> 标记定义的 <code>tooltips</code>。我用你的进行了快速（成功）测试。</p>
</section>
<section class="answer">
<p>将适当的 ID 添加到 <code><title></code>:</p>
<p><code><title id="uniqueTitleID">SVG in HTML title test</title></code></p>
<p>在 <code><svg></code> 标签上，添加：</p>
<p><code>aria-labelledby="uniqueTitleID"</code>（使用标题 ID）</p>
<p>标题应包含在 aria-labelledby 中，因为它比 aria-describedby</p> 具有更好的 screen-reader 支持
</section>
</div>
</div>
<div class="line"></div>
<div id="footer">©2023 WhoseBug</div>
</body>
</html>
我有一个 SVG 图像，其中包含用作工具提示的