Angular中不删除SVG title元素禁用hover提示框并添加点击事件的方法

以下两种方案都支持正常绑定点击事件，无需修改原SVG文件内容：

方案1：加载完成后动态处理SVG内部title #

你使用的inlineSVG指令提供了SVG加载完成的回调事件，可在SVG插入DOM后直接操作内部title元素：

1. 调整模板代码，添加加载回调和点击事件绑定：

<div 
  [inlineSVG]="'icons/forward-small.svg' | assetUrl"
  (inlineSVGLoaded)="onSvgLoaded($event)"
  (click)="handleSvgClick()"
></div>

2. 在对应TS文件中添加处理逻辑：

onSvgLoaded(svg: SVGElement) {
  const innerTitle = svg.querySelector('title');
  if (innerTitle) {
    // 可任选以下一种处理方式
    // 方式1：清空title文本内容
    innerTitle.textContent = '';
    // 方式2：隐藏title元素，完全保留原内容
    // innerTitle.style.display = 'none';
    // 方式3：添加无障碍属性，同时阻断提示触发
    // innerTitle.setAttribute('aria-hidden', 'true');
  }
}

handleSvgClick() {
  // 你的点击事件业务逻辑
}

方案2：嵌套元素配合CSS实现（无额外JS逻辑） #

如果不想写额外的JS处理代码，可以通过嵌套元素+事件穿透的方式实现：

<!-- 点击事件绑定在外层元素 -->
<div (click)="handleSvgClick()" style="display: inline-block;">
  <!-- 内层SVG禁用鼠标交互，阻断title提示触发 -->
  <div 
    [inlineSVG]="'icons/forward-small.svg' | assetUrl"
    style="pointer-events: none;"
  ></div>
</div>

pointer-events: none会让SVG不响应任何鼠标交互，自然不会触发内部title的悬浮提示，鼠标事件会穿透到外层元素正常触发点击回调。

内容的提问来源于stack exchange，提问作者N.Selwi