如何处理 SVG 中的多个工具提示

Question

我有一个带有标题元素的 SVG，以及带有自己的空标题的多边形，希望在将鼠标悬停在多边形上时防止出现父标题，因为我有一个用于多边形的自定义 JavaScript 工具提示。所以类似

<svg aria-labelledby="title1">
<title id = "title1">My big title</title>
<polygon aria-labelledby="title2"></polygon>
// this title element is dynamically generated by JS after the rest of the SVG is added to page
<title id="title2"></title>
</svg>

SVG 是从库动态生成的，我使用 JavaScript 附加空白标题以从多边形中删除主标题工具提示，但运行 JavaScript 后，即使新的空白标题位于 DOM 中，工具提示仍然会出现。

如果我进入开发人员工具并编辑 HTML，但不进行任何更改，然后将鼠标悬停在多边形上，则仅自定义工具提示会按预期显示。 JavaScript 代码似乎添加了空白标题，但浏览器正在缓存之前的 aria 数据状态。有没有办法使用 JavaScript 强制浏览器重新评估 aria 元数据？我尝试过添加和删除类等基本操作

Answer 1

您可以在dom中重新插入SVG：

const svg = document.querySelector("svg");
const clone = svg.cloneNode(true);
svg.parentNode.replaceChild(clone, svg);

或者删除并添加父级。

最小的可重复性将有利于进一步调查。