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

Posted 2023-03-28

【中文标题】在 Angular 中抑制 SVG 的标题工具提示

【英文标题】：Suppress title tooltip of SVG in Angular

【发布时间】：2021-12-31 22:53:00

【问题描述】：

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

<div [inlineSVG]="'icons/forward-small.svg' | assetUrl"></div>

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

如何在不从 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;