SVG 数据 URI 不在 img 标签中呈现
SVG Data URI doesn't render in img tag
我有一个数据 URI Base64 编码字符串，我是从 Kendo 地图的 Kendo.drawing.exportSVG 方法中获取的。
如果我将 Base64 字符串放入 SVG 解码器，然后将生成的 SVG 保存到一个文件并在浏览器中打开它，图像显示正常，但如果我将它放入 <img> 标签，则没有显示。
Base64 字符串非常大，所以我将其放在 JsFiddle 中进行演示，而不是将其粘贴到此处。
https://jsfiddle.net/qmap5sg9/
谁能告诉我为什么无法加载图片？
您的数据 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&mkt=en-US&shading=hill" clip-path="url(#kdef7)" />
当用作图像时，在您的情况下，通过图像标签，SVG 必须由单个文件组成，因此您必须将这些图像中的每一个编码为数据 URLs，然后一旦您已经完成将整个 SVG 文件重新编码为数据 URL.
我有一个数据 URI Base64 编码字符串，我是从 Kendo 地图的 Kendo.drawing.exportSVG 方法中获取的。
如果我将 Base64 字符串放入 SVG 解码器，然后将生成的 SVG 保存到一个文件并在浏览器中打开它，图像显示正常，但如果我将它放入 <img> 标签，则没有显示。
Base64 字符串非常大，所以我将其放在 JsFiddle 中进行演示，而不是将其粘贴到此处。
https://jsfiddle.net/qmap5sg9/
谁能告诉我为什么无法加载图片？
您的数据 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&mkt=en-US&shading=hill" clip-path="url(#kdef7)" />
当用作图像时，在您的情况下，通过图像标签，SVG 必须由单个文件组成，因此您必须将这些图像中的每一个编码为数据 URLs，然后一旦您已经完成将整个 SVG 文件重新编码为数据 URL.