Question

我尝试使用动态生成的svg（example）为bing地图创建一个svg图钉。不幸的是，它并没有在地图上正确渲染引脚。我四处寻找并发现bing maps API正在将src设置为base64编码图像。

所以我尝试将图像源复制到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中，两个图像都会被渲染得很好。这有什么问题？

Answer 1

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

Answer 2

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

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

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

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

数据中的svg未呈现

2 个答案: