SVG 标题与 HTML 标题属性

您知道title属性吗？我可以这样做

<div title="The Title">
  I'm a div with a `title`
</div>

现在，如果我在使用鼠标指针的设备上将光标悬停在该元素上，我将得到…

这，嗯，我想算是一件事。我有时会用它来在使用简写形式的元素上显示扩展的日期或时间。这是一种仅供有视力且使用鼠标的用户使用的微小的用户体验帮助。

但据我了解，它并不是特别有用。Ire Aderinokun 深入研究了它在<abbr>元素中的用法（一个经常被引用的示例），并发现它单独使用效果不佳。她建议使用一种增强型 JavaScript 模式。她还提到 JAWS 有一种设置可以宣布其中的标题，这很有趣（尽管听起来默认情况下是关闭的）。

老实说，我不知道title对于屏幕阅读器有多有用，但它肯定会有细微差别。

不过我确实刚刚了解了一些关于标题的内容……这不起作用

<!-- Incorrect usage -->
<svg title="Checkout">
</svg>

如果将鼠标悬停在该元素上，您将不会看到标题显示。您必须像这样操作

<!-- Correct usage -->
<svg>
  <title id="unique-id">Checkout</title>
  
  <!-- More detail -->
  <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc>
</svg>

有趣的是，Firefox 79 刚刚开始支持这一点。

当您像那样使用 title 时，显示标题弹出窗口的可悬停区域是<svg>的整个矩形。

我之所以关注这一切，是因为我收到了一封来自某人的有趣邮件，他遇到了一种情况，即标题弹出窗口似乎只在将鼠标悬停在 SVG 的“填充”像素上时才会出现，而不是在透明像素上出现。我当时想，“奇怪”。在我的测试中也无法复制。

事实证明确实存在这种情况。您可以在<use>元素中应用<title>，然后标题仅适用于通过<use>传入的那些像素。

如果删除“白色部分”标题，您会看到“黑色部分”仅在黑色像素上显示。这在各个浏览器中似乎是一致的。如果这是您应用标题的方式，需要注意这一点。