如何向从文件动态加载的 SVG 元素添加事件侦听器？答案

【问题标题】：How to Add Event Listeners to SVG Elements Loaded From File Dynamically?如何向从文件动态加载的 SVG 元素添加事件侦听器？
【发布时间】：2019-08-01 16:29:15
【问题描述】：

问题陈述

我正在尝试动态加载 svg 文件，然后监听各个 svg 元素上的点击事件。 svg 加载正常，但我无法检测 /when/ 它已加载，以便我可以添加侦听器。

上下文

svg 是一个地图，当用户点击一个字段时会弹出。然后他们应该能够从地图中选择一个国家。 svg 需要动态加载，因为该字段可以使用不同的地图进行参数化。

我尝试过的

似乎常见的建议是在动态创建的元素上监听“加载”事件，然后通过 element.contentDocument 属性或 element.getSVGDocument() 函数访问实际的 svg 元素。

var element = document.createElement('embed');
element.src = this.mapSrc_;
element.type = 'image/svg+xml';
document.body.appendChild(element );

element.addEventListener('load', function() {
  console.log(element.firstChild, element.contentDocument, element.getSVGDocument());
});

或：

var element = document.createElement('object');
element.setAttribute('data', this.mapSrc_);
element.setAttribute('type', 'image/svg+xml';
document.body.appendChild(element);

element.addEventListener('load', function() {
  console.log(element.firstChild, element.contentDocument, element.getSVGDocument());
});

但在这两种情况下，我都会得到以下控制台日志：

null undefined null

从文件加载 svg 然后向其中添加事件侦听器的正确方法是什么？

感谢您抽出宝贵时间阅读本文！我非常感谢任何帮助：D

[编辑：如果您愿意，可以查看我的实际代码here，但请注意，它与Blockly 框架完全相关。]

【问题讨论】：

map的值是多少？
对不起@AnuragSrivastava 它的element 在我的代码中被命名为map，但我认为element 对于这个例子来说会更通用。我想我忘了在控制台日志中更改它。固定！
也许数据，即 this.mapSrc_ 无效。
@RobertLongson 我希望！但是 svg 正确显示，事件只是不工作：imgur.com/a/U3skf7g 你可以在这里查看我的源代码：github.com/BeksOmega/blockly/blob/… 但它与 Blockly 框架的联系非常好，所以我知道它会有多大帮助。感谢您的建议！ -贝卡

标签： javascript svg

【解决方案1】：

经过一些试验和错误后，似乎这是从文件运行页面的问题，特别是在 Chrome 和 Firefox 上（适用于 Edge 和 IE11）。

您可以通过下载this example page 进行测试。如果您从文件中运行它，图标会保持橙色，但在线页面可以正常工作。

我将继续在 Edge 而不是 Chrome 上进行测试，但其他人可能对此问题有不同的解决方案。

【讨论】：