HTML 中 SVG 的鼠标操作

Question

如果我将 SVG 嵌入到 HTML 页面中，则用户可以单击 SVG 中的单词（包含在文本中）。

是否有可能（通过 JavaScript 或类似的方式）找出用户点击了哪个文本元素？

例如如果我有类似

的东西

<text class='f53' x='393.439815' y='162.22991'>EA</text>

判断用户是否点击了这个？

Answer 1

您可以像这样确定在哪个元素上执行了操作：

const svg = document.querySelectorAll(".svg ");
svg.addEventListener('click', e => {
   if(e.target.classList.contains("f53")) {
    ...
   }
});

mouse actions for SVG in HTML