未呈现数据 uri 中的 svg答案

【问题标题】：svg in data uri not rendered未呈现数据 uri 中的 svg
【发布时间】：2017-01-18 19:36:29
【问题描述】：

我尝试使用动态生成的 svg (example) 为 bing 地图创建 svg 图钉。不幸的是，它无法在地图上正确呈现图钉。我四处搜寻，发现 bing maps API 将 src 设置为 base64 编码图像。

所以我尝试将图像源复制到 js fiddle 中，看看是不是 bing maps API 或浏览器有问题。它适用于简单的图像，如

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <circle id="circle" cx="25" cy="25" r="25" />
</svg>

但不会渲染更复杂的图像

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <defs>
        <circle id="circle" cx="25" cy="25" r="25" />
    </defs>
    <clipPath id="clip"></clipPath>
    <image xlink:href="https://www.gravatar.com/avatar/08b73d0a58fc120a8cc8dc561d83b3d6.jpg?s=50&d=mm" x="0" y="0" height="50" width="50" />
</svg>

JS 小提琴：https://jsfiddle.net/w1yn9Lo8/6/

如果我将它们直接粘贴到 HTML 中，两个图像都可以很好地呈现。这里有什么问题？

【问题讨论】：

必应地图不支持 SVG 图像标签，因为地图控件采用 SVG 并立即在 HTML 画布上绘制它们。因此，图像没有机会加载。

标签： html svg data-uri bing-maps

【解决方案1】：

当您使用 SVG 文件作为数据 URI 时，您不能有任何外部引用，因此您必须在将包装 SVG 文件编码为数据 uri 之前将 jpg 编码为数据 uri。

【讨论】：

有没有一种不错的方法可以不用手动通过http请求图片？
取决于 gravatar 是否支持 CORS，如果支持，您也许可以通过 XMLHttpRequest 在 javascript 中实现。

【解决方案2】：

问题是，即使您在 SVG 中使用内部 foreignObject，pushpin 的 SVG 内容也无法绘制未加载的图像。

我会使用画布而不是 SVG。您可以在其中使用所有画布基元。

我的解决方案是：Bing Maps API v8 - pushpin SVG URI image

将图像预加载到对象（对象数组）
在画布中绘制图像和/或其他图元并在图钉中使用画布

【讨论】：