使用javascript生成的SVG和嵌入的外部SVG作为Google Maps图标，
使用javascript生成的SVG和嵌入的外部SVG作为Google Maps图标，
提问于 2020-02-06 00:03:50
所以我正在开发一个使用谷歌地图JavaScript应用程序接口的网站。我有几个标记，我想为它们生成一个SVG图标，但是这个SVG必须使用JavaScript变量(在图标上显示一个数字)，并显示一个外部SVG (比如FontAwesome图标)。
我设法用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),
}然后我使用newIcon作为标记的图标。这是没有问题的工作。
但是，当我尝试链接到我想要添加到图标的外部SVG时(以及现有的)，它不起作用：
<image xlink:href="<link to external SVG on the same server>" />我已经尝试使用完全相同的外部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>有什么建议吗？谢谢。
回答 1
Stack Overflow用户
发布于 2020-04-04 19:20:38
来自Mozilla
使用<image>显示的
SVG文件被视为图像:不加载外部资源，不应用访问过的样式，并且它们不能交互。要包含动态SVG元素，可以尝试使用带有外部URL的
<use>。
我想你可以这样对待<use>或<object>：
<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>在此thread中有更多信息...
但我会在生成图标之前从外部源下载svg。当您尝试多次下载它时，它无论如何都会被缓存。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60079677
复制相关文章
相似问题
腾讯云开发者
