首页 > 解决方案 > 使用指令以编程方式实例化 SVG 元素

问题描述

我会在基于 SVG 文件的角度项目中使用工具提示模块。

我必须动态生成工具提示。

我应该使用 JS 来添加matTooltip属性

这是我所做的:

ngAfterViewInit() {
  const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  cir1.setAttribute("cx", "80");
  cir1.setAttribute("cy", "50");
  cir1.setAttribute("r", "30");
  cir1.setAttribute("fill", "green");
  let svg = document.getElementById('svg');
  cir1.setAttribute('matTooltip', 'N8688');
  svg.appendChild(cir1)
  }

悬停时没有显示任何工具提示。

但是当我将matTooltip属性直接应用于 SVG 时,它就可以工作了。

更新

我应该动态添加指令,但我找不到办法。

堆栈闪电战

标签: javascripthtmlangularsvgangular-material

解决方案


推荐阅读