数据 uri 中的 svg 未呈现

Question

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

所以我尝试将图像源复制到js fiddle 中，看看是bing 地图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 Fiddle: https://jsfiddle.net/w1yn9Lo8/6/

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

Answer 1

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

Answer 2

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

我会使用 canvas 而不是 SVG。您可以在其中使用所有 canvas 原语。

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

将图像预加载到对象（对象数组）
在canvas中绘制图像and/or另一个图元并在图钉

数据 uri 中的 svg 未呈现

svg in data uri not rendered

html

svg

data-uri

bing-maps