svg in data uri not rendered

我尝试使用动态生成的svg创建一个svg图钉（example）。不幸的是，它不能在地图上正确显示引脚。我四处挖掘，发现bing地图API将src设置为base64编码图像。svg in data uri not rendered

所以我试图将图像源复制到js小提琴中，看看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。这里有什么问题？

来源

2017-01-18 Sven-Michael Stübe

SVG图像使用帆布标记在Bing地图中不受支持，因为地图控件需要使用SVG并立即在HTML画布上绘制它们。因为这样的图像没有机会加载。 – rbrundritt