在IE11中捕获SVG元素上的“图像”加载事件

Question

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

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

Is it possible to listen image load event in 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>

部分应用程序需要知道所有图像何时完成加载，以便完成初始化任务。

为了提供图像加载的通知，我使用jQuery为元素添加了一个'load'事件处理程序。

我无法添加“onLoad”或修改正在生成的标记，因为我无法访问它。最快我可以访问它的是当svg已经被第三方工具包注入到dom中时，此时加载已经在进行中并且我无法附加或修改任何内容因为我来不及影响操作。

我尝试了什么以及发生了什么

我添加的“加载”事件在Chrome和Firefox中运行得非常好。我正在添加以下内容：

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

除了IE

之外，它的工作原理非常好

除了IE11之外我没有瞄准任何东西（IE10在推动但是没有更少），但无论我尝试什么，IE11都不会触发事件。

现在，这个故事有点奇怪的转折。

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

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

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

所以我的问题是： 如何在svg图中的每个单独的图像之后获得统一的行为，该行为适用于IE11，Chrome＆amp; FF。

要回答这些问题，我可以听到有人问过我：

• 是的，我正在使用打字稿，但这与解决方法无关。
• 第三方工具包是'MxGraph'/'JGraph'，但这不是特定于工具包的问题，​​而是SVG图像问题
• 不，我不能提供示例代码（除了我已经展示的内容）这是一个封闭的项目
• 是的，我在项目中有jQuery，是的我可以使用它，但我也可以使用native，但我宁愿不再添加任何依赖项/库 *该项目目前使用，jQuery，Knockout，Bootstrap＆amp;要求，在打字稿中，编码为ES6标准，并在输出时转换为ES5。

如果有人能提出任何解决方案的建议，我们将非常感激。

更新1

继续研究这个问题，我决定只看每个浏览器本地查找的内容，所以我添加了以下内容：

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

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

Internet Explorer不仅添加了来自svg的'image'标签，还添加了来自doc中其他位置的'img'标签

这表明IE或者故意这样做，或者说不能分辨出'image'和＆amp; 'IMG'

Answer 1

这是Kaiido建议的样本。 我知道这很糟糕，但我找不到IE和Edge的任何其他选项。

＆＃13;

＆＃13;

var url = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
var svg = document.getElementById('svg');
var img = document.createElementNS("http://www.w3.org/2000/svg", 'image');

var dummy = new Image();
dummy.addEventListener('load', function()
{
  console.log("dummy onload");
  img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", url);
  img.setAttribute("width", dummy.width);
  img.setAttribute("height", dummy.height);
  svg.appendChild(img);
}, false);
dummy.src = url;

＆＃13;

<svg id="svg" width="1000px" height="500px" />

＆＃13;

＆＃13;

＆＃13;