在 Angular 中抑制 SVG 的标题工具提示答案

【问题标题】：Suppress title tooltip of SVG in Angular在 Angular 中抑制 SVG 的标题工具提示
【发布时间】：2021-12-31 22:53:00
【问题描述】：

将 SVG <title> 悬停在 SVG 图标上时会显示为工具提示。

&lt;div [inlineSVG]="'icons/forward-small.svg' | assetUrl"&gt;&lt;/div&gt;

我不希望在将鼠标悬停在 SVG 箭头图标上时显示此工具提示（向前小）。我尝试设置（title=""、matTooltip="" 或 alt=""）但没有成功。我还想在 SVG 上添加一个点击监听器。

如何在不从 SVG 文件中删除标题元素的情况下隐藏此工具提示？

【问题讨论】：

标签： html angular svg

【解决方案1】：

根据 MDN 文档：

<title> 元素中的文本不会呈现为图形的一部分，但浏览器通常将其显示为工具提示。

浏览器将使用此<title> 作为工具提示。一种解决方法是禁用整个 svg 上的任何 pointer-events。

div svg{
pointer-events: none;
}

注意：如果您不希望 SVG 上有任何点击侦听器，请使用它。

选项 2：

如何在不删除标题元素的情况下隐藏此工具提示来自 SVG 文件？

您可以通过在实际的 <title> 之前插入一个空的 <title></title> 来操作 SVG

let svg=document.querySelector('svg'); //Select your SVG
svg.querySelectorAll('title').forEach(item=>{
  item.parentElement.innerHTML='<title></title>'+item.parentElement.innerHTML;
});

【讨论】：

其实我想在SVG上加一个点击监听。在实际的 <title> 之前插入一个空的 <title></title> 也不能按预期工作，因为它向我显示了一个空的工具提示。

【解决方案2】：

通过在styles.scss文件中添加以下样式可以正常工作，也可以在SVG上添加点击监听器：

    svg {
      vertical-align: sub;
      pointer-events: none;
    }

【讨论】：