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的以空值开头的iframe不允许访问任何内部文档，因此here is a jsfiddle。

Answer 2

如果直接使用嵌入式svg，则可以执行此操作。然后，您可以从javascript添加处理程序onClick并使用函数中的event.target获取路径详细信息

URL1 = encodeURI(URL1);
URL2 = encodeURI(URL2);

Answer 3

要获取单击元素时的鼠标坐标，请使用e.clientX和e.clientY

document.querySelector('#map').addEventListener('click', function (e) {
  console.log('X coords: ' + e.clientX + ', Y coords: ' + e.clientY);
});

#map {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}

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

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

3 个答案: