在 IE11 中的 SVG 元素上捕获 "Image" 加载事件

Question

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

我最接近的已经是这个问题了：

Is it possible to listen image load event in SVG?

这没有帮助。

场景

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

此第 3 方工具包创建 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 时，此时加载已经在进行中，我无法附加或修改任何东西，因为我是来不及影响操作。

我尝试过的以及正在发生的事情

我添加的 'load' 事件在 Chrome 和 Firefox 中工作得很好。我要添加以下内容：

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

除了在 IE 中，它工作得很好

除 IE11 外，我没有针对任何其他目标（IE10 是推动但仅此而已），但无论我尝试什么，IE11 都不会触发事件。

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

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

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

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

所以我的问题是： 我怎样才能得到一个统一的行为，在 svg 图中的每个单独的图像之后告诉我，它适用于 IE11，Chrome & FF。

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

是的，我正在使用打字稿，但这与解决方法无关。
第 3 方工具包是 'MxGraph'/'JGraph'，但这不是特定于工具包的问题，它是一个 SVG 图像问题
不，我不能提供示例代码（除了我已经展示的）这是一个封闭的项目
是的，我在项目中确实有 jQuery，是的，我可以使用它，但我也可以使用原生的，但是我宁愿不必再添加 dependencies/libraries *该项目目前使用 jQuery、Knockout、Bootstrap & Require，在打字稿中，编码为 ES6 标准并在输出时转换为 ES5。

如果有人可以提供解决此问题的任何建议，将不胜感激。

更新 1

继续研究这个，我决定只看看每个浏览器在本机上找到了什么，所以我添加了以下内容：

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

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

但是，Internet Explorer 不仅添加来自 svg 的 'image' 标签，还添加来自文档其他地方的 'img' 标签

这表明 IE 要么故意这样做，要么无法区分 'image' 和 'img'

Answer 1

这是 Kaiido 建议的示例。我知道这很糟糕，但我找不到适用于 IE 和 Edge 的任何其他选项。

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;

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

在 IE11 中的 SVG 元素上捕获 "Image" 加载事件

Trap the "Image" loading event on an SVG element in IE11

html

javascript

svg

onload-event

场景

我尝试过的以及正在发生的事情

更新 1