如何摆脱鼠标悬停在字体真棒svg图标上的标题（使用svg精灵）答案

【问题标题】：How to get rid of title on mouse hover on font awesome svg icon (using svg sprites)如何摆脱鼠标悬停在字体真棒svg图标上的标题（使用svg精灵）
【发布时间】：2019-06-20 11:04:48
【问题描述】：

编辑：如果您使用的是 Font Awesome v. >= 5.8.0，则此问题无关紧要，因为它的维护者（经过长时间的讨论:)），同意应该从 svg 文件中删除“标题”，并在 v. 5.8.0 中完成：https://github.com/FortAwesome/Font-Awesome/issues/14595

现在，回到原来的问题：

我刚刚尝试了“svg sprites”版本中的 Font Awesome (5)，遵循官方的非常简单的教程：https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites

一切都按预期工作，除了当我将鼠标悬停在图像上时会弹出一个标题（这很糟糕）。我的意思是我们看到的那个，例如<div title = "blah"></div>。

因此，按照文档（我猜），我已将“sprites/regular.svg”文件复制到我的服务器，并且：

<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>

'.fa-svg-icon' 类，为了完整起见：

.fa-svg-icon{
    width:1em;
    height:1em;
}

我在悬停图像时看到的是标题“用户”。那是因为这是在 svg 文件中声明的内容，在“我们的”片段中：

<symbol id="user" viewBox="0 0 448 512">
    <title id="user-title">User</title>
    <path d="M224 256c70.7 0 ......"></path>
</symbol>

我尝试将 title = 'something' 添加到 svg 元素和 <use> 元素中，但没有任何效果 o.O

FX 和 Chrome 都会出现这种情况。

编辑1：我做了一个测试页：https://kpion.github.io/stuff/font-awesome-issue/

我很确定我在这里遗漏了一些明显的东西，因为显然我是这个世界上唯一有这个问题的人？？？？或者谷歌坏了。一个或另一个:)

编辑 2：要回答 cmets 的问题，这是我的开发工具 -> chrome 中的元素显示的内容（在“导入”svg 符号之后）：

<svg class="fa-svg-icon" title="my -not-working-title for user">
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
    #shadow-root (closed)
    <svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
        <title id="user-title">User</title>
        <path d="M224 256c70.7 0 128-57.3 128-..."></path>
    </svg>  
</svg>

不，它在悬停时不会改变，请记住不涉及任何 js，无论是我的还是来自 font awesome。

【问题讨论】：

在您的页面中，如果您查看实际的 html，具有“title”属性的元素是什么，该属性是始终存在还是仅当您将鼠标悬停在它上面时？
@NTR - 感谢您的关注，我相应地更新了问题。也许我会强调它 - 没有涉及 js，没有魔法，在 :hover 上的 css 上什么都没有。没什么:)
试图在没有 fontawesome 的情况下重现该问题，但无法重现。似乎问题可能与此有关。不幸的是，我不是进一步调查的合适人选。祝你好运！
除非您需要点击字体，请尝试在 CSS 中添加pointer-events:none
如果您不想要标题元素，请删除它们。

标签： html svg font-awesome font-awesome-5

【解决方案1】：

我无法在小提琴中重新创建您的代码环境以自己尝试，但您可以尝试以下 CSS 代码，仅在图标有链接时获取指针事件：

.fa-svg-icon{
  pointer-events: none;
}

.fa-svg-icon a {
  pointer-events: auto;
}

【讨论】：