html - 如何摆脱鼠标悬停在 font awesome svg 图标上的标题(使用 svg sprites)

Question

编辑:如果您使用的是 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: 要回答评论中的问题，这是我的开发工具 -> 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。

Answer 1

我无法在 fiddle 中重新创建您的代码环境来亲自尝试，但您可以尝试以下 CSS 代码，仅在图标具有链接时获取指针事件:

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

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