Javascript 陷阱；“图像”；在IE11中的SVG元素上加载事件

希望有人已经解决了这个问题，所以应该很容易

我最接近的问题就是这个问题：

这没用

脚本 我正在使用第三方工具包在我正在创建的自定义文档编辑器中创建SVG图形

此第三方工具包创建SVG“..”标记以保存正在编辑的图像

具体而言，它创建如下输出：

<g transform="translate(0.5,0.5)" style="visibility: visible;">
  <image x="4.68" y="0" width="469" height="81" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="genimage?1453893356324" preserveAspectRatio="none">
  </image>
</g>

除了IE之外，这一切都很好

我的目标不是IE11以外的任何东西（IE10只是一个推送，但没有更少），但无论我尝试什么，IE11都不会触发事件

现在，这个故事有点奇怪

在我设置此事件之前，在我告诉第三方产品加载其图像之前，我有一个仅使用标准文件加载的占位符图像

documentMockImage: HTMLImageElement = new Image();
this.documentMockImage.src = "mockimage";

并且，我添加的处理程序在IE中触发，告诉我加载的模拟图像（这不是我想要的），但在Chrome&FF中，它会按预期触发图形中每个加载的图像，但不会触发图像占位符（这是我想要的行为）

所以我的问题是： 如何获得统一的行为，在svg图形中的每个单独的图像之后告诉我，这在IE11、Chrome和FF中都有效

要回答我听到的问题，人们已经在问我：

• 是的，我使用的是typescript，但这与如何解决这个问题无关
• 第三方工具包是“MxGraph”/“JGraph”，但这不是一个特定于工具包的问题，而是一个SVG图像问题
• 不，我不能提供示例代码（除了我已经展示的代码），这是一个封闭的项目
• 是的，我在项目中有jQuery，是的，我可以使用它，但我也可以使用native，不过我不想再添加任何依赖项/库 *该项目目前在typescript中使用jQuery、Knockout、Bootstrap和Require，按照ES6标准编码，并在输出时传输到ES5

如果有人能为解决这个问题提供任何建议，我们将不胜感激

更新1 继续研究这一点，我决定只看看每个浏览器在本地发现了什么，所以我添加了以下内容：

$('g image').on('load', (e) => {
  console.log("Image Loaded");
  console.log(e);
});

var svgImages = document.getElementsByTagName('image');
console.log(svgImages);

Chrome&FF按预期返回了我文档中的4个SVG图像

然而，Internet explorer不仅添加了svg中的“图像”标记，还添加了文档中其他地方的“img”标记

---

这意味着IE要么故意这么做，要么无法区分“图像”和“img”之间的区别。

这是Kaido建议的一个示例。 我知道这很糟糕，但我找不到IE和Edge的其他选择

var url=”https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
var svg=document.getElementById（'svg'）；
var img=document.createElements（“http://www.w3.org/2000/svg“，‘图像’”；
var dummy=新图像（）；
dummy.addEventListener（'load'，function（））
{
log（“虚拟加载”）；
设置属性（“http://www.w3.org/1999/xlink“，”xlink:href“，url）；
img.setAttribute（“宽度”，dummy.width）；
img.setAttribute（“高度”，虚拟高度）；
svg.appendChild（img）；
}，假）；
dummy.src=url
对于更新部分，是的IE带有
标记，但是这允许我们：-P现在对于您的问题，您必须知道Safari也不会在
上触发加载事件。我找到的唯一跨浏览器解决方案是创建一些HTMLImage对象，将它们的
.src
设置为
的
href
并侦听HTMLImage加载事件。因此，基本上，我需要找到一种超越第三方工具包的方法，使其生成“img”标记，这样我就可以在所有浏览器中可靠地捕获加载事件了？英雄联盟正如我所担心的那样，你可能会认为所有的制造商现在都已经学会了和睦相处。。有时候我真的很恼火，我们仍然不得不忍受这种胡说八道，HTML5本应该结束这一切。我会搜索所有svg图像，然后生成HTML图像，但这取决于你。好吧，基尔，这是一个明智的回答：-）把它作为一个答案，我会把它标记为已接受的…只是另一个提示，我在第三方库中查找了绘图代码，找到了一些新的东西，帮助我也开始获得img标签，不幸的是，我不能分享这些代码，因为它是商业性的。考虑到我现在已经离开了这个项目（大约1.5年前），没有其他人提交了答案，默认情况下，你会得到接受的：-）（附言：很抱歉，直到现在我才注意到）