使用 PixiLoader 加载带有数据 URI 的图像

Question

我需要使用 PIXILoader 在 Pixi.js 中加载一些标记图像。这些图像是编码的 svg 图像，因此采用这种形式：data:image/svg+xml;base64,XYZ。

我根据浏览器观察各种行为：

• Chrome/Chromium 将触发 HTTP 查询，请注意，但至少它可以工作
• Firefox 不会做任何事情。加载开始（PIXILoader.onStart 被触发），但没有调用其他错误或完成回调，就好像它默默地失败或什么都不做一样。

伪代码：

PIXILoader.add(
  `marker_xyz`,
  marker.customIcon // a data URI
);
PIXILoader.load((loader, resources) => {
  debugPixi(
    `Done loading ${Object.keys(resources).length} markers textures`
  );
});

预期的行为是在没有任何 HTTP 请求的情况下立即（甚至更好地同步）加载资源。

有什么解决办法？编写自定义策略，或者可能通过手动改变加载器的某些属性来“手动”加载资源？

Answer 1

经过一整天的工作，找到了我自己问题的答案：您只需照常加载它们，看到它们出现在“网络”选项卡中是正常的，因为 PIXI 在底层依赖 XHR 来获取元数据。因此它们被视为与远处图像相同。

我的问题实际上是隐藏了另一个错误的错误：在 Firefox 中，SVG 标记的大小不能以百分比表示。

相关：

• 吞噬错误问题：https://github.com/pixijs/pixi.js/issues/7473
• 更多关于 Firefox 中画布中 svg 的解释：https://github.com/pixijs/pixi.js/issues/7473