如何为外部SVG的circle元素添加Angular Material Tooltip

外部动态加载的SVG元素不在Angular编译上下文内，直接给circle添加matTooltip属性无法触发指令初始化，以下是三种可行方案：

方案一：手动初始化MatTooltip指令 #

通过手动实例化MatTooltip指令并绑定到目标circle元素，步骤如下：

1. 确保组件所在模块已导入TooltipModule。
2. 在组件中注入所需依赖：

import { HttpClient } from '@angular/common/http';
import { MatTooltip } from '@angular/material/tooltip';
import { ElementRef, Injector, NgZone, Overlay, OverlayPositionBuilder, Platform, ScrollDispatcher } from '@angular/core';

constructor(
  private http: HttpClient,
  private overlay: Overlay,
  private positionBuilder: OverlayPositionBuilder,
  private scrollDispatcher: ScrollDispatcher,
  private platform: Platform,
  private ngZone: NgZone,
  private injector: Injector
) {}

3. 加载SVG并初始化Tooltip：

loadSvg() {
  this.http.get('assets/your-svg.svg', { responseType: 'text' }).subscribe(svgText => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const circle = svgDoc.querySelector('circle#target-circle');
    
    // 将SVG添加到页面容器
    const svgContainer = document.getElementById('svg-container');
    svgContainer.appendChild(svgDoc.documentElement);

    // 手动创建Tooltip实例并绑定到circle
    const elementRef = new ElementRef(circle);
    const tooltip = new MatTooltip(
      elementRef,
      this.overlay,
      this.positionBuilder,
      this.scrollDispatcher,
      this.platform,
      this.ngZone,
      this.injector
    );
    
    // 设置Tooltip内容与位置
    tooltip.message = '自定义Tooltip文本';
    tooltip.position = 'above';
    // 触发指令初始化
    tooltip.ngOnInit();
  });
}

方案二：用容器元素包裹（简易实现） #

创建与circle位置、尺寸完全重合的容器元素，给容器添加matTooltip，实现hover触发效果：

1. 加载SVG并创建匹配容器：

import { HttpClient } from '@angular/common/http';
import { Renderer2 } from '@angular/core';

constructor(
  private http: HttpClient,
  private renderer: Renderer2
) {}

loadSvg() {
  this.http.get('assets/your-svg.svg', { responseType: 'text' }).subscribe(svgText => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const circle = svgDoc.querySelector('circle#target-circle');
    
    const svgContainer = document.getElementById('svg-container');
    svgContainer.appendChild(svgDoc.documentElement);

    // 获取circle的位置与尺寸
    const circleRect = circle.getBoundingClientRect();
    const svgRect = svgContainer.getBoundingClientRect();
    
    // 创建Tooltip容器
    const tooltipContainer = this.renderer.createElement('div');
    // 设置样式与circle完全重合
    this.renderer.setStyle(tooltipContainer, 'position', 'absolute');
    this.renderer.setStyle(tooltipContainer, 'left', `${circleRect.left - svgRect.left}px`);
    this.renderer.setStyle(tooltipContainer, 'top', `${circleRect.top - svgRect.top}px`);
    this.renderer.setStyle(tooltipContainer, 'width', `${circleRect.width}px`);
    this.renderer.setStyle(tooltipContainer, 'height', `${circleRect.height}px`);
    this.renderer.setStyle(tooltipContainer, 'pointerEvents', 'none'); // 不干扰circle原有交互
    // 添加Tooltip属性
    this.renderer.setAttribute(tooltipContainer, 'matTooltip', '自定义Tooltip文本');
    
    // 将容器添加到SVG父元素
    this.renderer.appendChild(svgContainer, tooltipContainer);
  });
}

注意：需确保动态创建的容器被Angular编译上下文识别，可结合ChangeDetectorRef手动触发变更检测。

方案三：将SVG转为Angular组件（规范方案） #

若SVG需频繁交互，推荐将其转为Angular组件：

1. 把外部SVG内容复制到新组件的模板文件中（如app-custom-svg.component.html）。
2. 直接在模板内的circle元素上添加matTooltip属性。
3. 在需要使用SVG的地方直接引用该组件，Angular会自动编译并初始化Tooltip指令。

这种方式完全符合Angular开发规范，避免动态DOM操作的潜在问题。

内容的提问来源于stack exchange，提问作者GRM