javascript - 单击时检测SVG文件中的路径是什么

Question

我正在处理 SVG 文件。我通过对象标记 html 嵌入了 SVG 文件。

像这样:

<object id="map" type="image/svg+xml" data="the-file-has-same-domain"></object>

当我通过 Javascript 或任何对此支持的库单击时，我如何检测到哪个区域。

谢谢!!!

Answer 1

由于您的文件在同一个域中(如果我们相信您的假名)，那么您可以简单地访问它的文档，并从您的主页附加监听器:

// wait for your <object> is loaded
document.getElementById('map').onload = e => {
  const doc = map.getSVGDocument(); // that's the inner document
  doc.addEventListener('click', your_handler);
};

不幸的是，StackSnippet 的 null-origined iframe 不允许访问任何内部文档，因此 here is a jsfiddle .