使用javascript生成的SVG和嵌入的外部SVG作为Google地图图标，

所以我正在开发一个使用谷歌地图JavaScript API的网站。我想为几个标记生成一个SVG图标，但是这个SVG必须使用JavaScript变量（在图标上显示一个数字），以及显示一个外部SVG（例如一个图标）

我设法用JavaScript变量生成图标，如下所示：

let newIcon = [
    '<svg width="' + size + 'px" height="' + size + 'px" viewBox="0 0 100 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >',

    '<ellipse id="circuloExterior" fill="' + mainColor + '" cx="50" cy="50" rx="42.8" ry="42.8"/>',
    '<polygon id="triangulo" fill="' + mainColor + '" stroke="' + mainColor + '" stroke-width="1.6" points="28,83 72,83 50,108"/>',
    '<ellipse id="circuloIntermedio" fill="' + mainColor + '" cx="50" cy="50" rx="41.2" ry="41.2"/>',
    '<ellipse id="circuloInterior" stroke="' + mainColor + '" fill="' + secColor + '" stroke-width="1.6" cx="50" cy="50" rx="32" ry="32"/>',

    '</svg>',
].join('\n');

newIcon = {
    url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(newIcon),
}

我已经尝试使用完全相同的外部SVG链接创建一个SVG文件，它可以独立工作，因此

image

标记没有问题

我还尝试将SVG显式指定为路径，而不是链接到它，这是可行的，但这并不是我想要的：

<g transform="translate(30,25) scale(0.13)"><path fill="#000000" d="M128 288c0-6.25-2-12.25-5-17.25-3.25-5-16.5-22-21.75-38.75-0.75-2.75-3.25-4-5.25-4s-4.5 1.25-5.25 4c-5.25 16.75-18.5 33.75-21.75 38.75-3 5-5 11-5 17.25 0 17.75 14.25 32 32 32s32-14.25 32-32zM256 256c0 70.75-57.25 128-128 128s-128-57.25-128-128c0-25.25 7.75-48.75 20.25-68.75 12.75-20 66.25-87.75 86.5-155.25 3.25-10.75 13.25-16 21.25-16s18.25 5.25 21.25 16c20.25 67.5 73.75 135.25 86.5 155.25s20.25 43.5 20.25 68.75z"/></g>

有什么建议吗？谢谢。

发件人：

与

一起显示的SVG文件被视为图像：不加载外部资源，不应用已访问的样式，并且它们不能交互。要包含动态SVG元素，请使用外部URL尝试

我想你可以像这样选择

或

：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" version="1.1">
    <object height="200" width="200" data="https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-9ba8de1b.svg"/>
</svg>

更多关于这个

---

但是我会在生成图标之前从外部源下载svg。当您多次尝试下载时，它将被缓存。

来自：

与

一起显示的SVG文件被视为图像：不加载外部资源，不应用已访问的样式，并且它们不能交互。要包含动态SVG元素，请使用外部URL尝试

我想你可以像这样选择

或

：

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" version="1.1">
    <object height="200" width="200" data="https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-9ba8de1b.svg"/>
</svg>

更多关于这个

---

---

但是我会在生成图标之前从外部源下载svg。当您尝试多次下载它时，它无论如何都会被缓存。

我尝试使用带有简单正方形和引用另一个SVG的

图像的SVG作为图标。当直接在浏览器中打开它时，它可以正常工作，但当用作图标时，只显示正方形。这一定是谷歌地图的一些局限性吧？有什么解决方法吗？我试着用一个简单的正方形和一个引用另一个SVG的
图像作为SVG的图标。当直接在浏览器中打开它时，它可以正常工作，但当用作图标时，只显示正方形。这一定是谷歌地图的一些局限性吧？有解决办法吗？