html - SVG 数据 URI 不在 img 标签中呈现

Question

我有一个从 Kendo.drawing.exportSVG 获得的数据 URI Base64 编码字符串来自剑道 map 的方法。

如果我将 Base64 字符串放入 SVG 解码器，然后将生成的 SVG 保存到一个文件并在浏览器中打开它，图像显示正常，但如果我将它放入 <img>标签，什么都不显示。

Base64 字符串非常大，所以我将其放在 JsFiddle 中进行演示，而不是将其粘贴到此处。

https://jsfiddle.net/qmap5sg9/

谁能告诉我为什么图片没有加载？

Answer 1

您的数据 URL 包含大量对外部图像的引用，例如

<image preserveAspectRatio="none" x="310.15625" y="281" width="256px" height="256px" xlink:href="http://ecn.t0.tiles.virtualearth.net/tiles/r311213001300102.jpeg?g=5171&amp;mkt=en-US&amp;shading=hill" clip-path="url(#kdef7)" />

当用作图像时，在您的情况下，通过图像标记，SVG 必须包含一个文件，因此您必须将这些图像中的每一个编码为数据 URL，然后在完成后重新编码整个 SVG 文件作为数据 URL。