SVG 作为标记的图标在 IE 中不起作用

Question

希望有人能帮助我：

我的情况：

我目前正在使用谷歌地图，我做了一些标记来代表一次旅行。现在这些标记的图标可以很容易地更改为您选择的图像并定义如下：

var marker = new google.maps.Marker({
    label: name[0],
    title: name,
    draggable: true,
    position: { lat: lat, lng: lng },
    icon: this._imgNormal,
    map: _map,
    customInfo: nearHotel.ID,
    descr: nearHotel.descr
});

但现在我需要将这些图标交换为 SVG 而不是 PNG。

我的尝试

首先我会解释我不使用这种简单方法的原因，然后在标记中使用它：

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

这是因为我想最终制作更复杂的 SVG，据我所知，这种方法不允许我在多个矩形内制作花。

我做了一些研究，并在这个网站上找到了一种方法：
Create Google Maps Markers with Inline SVG

我的问题和疑问

在 Chrome 和 Firefox 中这可以工作，但在 IE 中不行...我开始查找为什么它不能工作，它说它必须对 encodeURIComponent 用户做一些事情，这在 IE 中不会以同样的方式工作这可能就是它不受支持的原因。

有谁知道是否有某种方法可以使这种方法在 IE 中也能正常工作？ 或者是否有一种完全不同的方式来使用适用于任何浏览器的复杂 SVG？

很高兴听到你的回答，在此先谢谢你

我在 Illustrator 中创建的 SVG 示例

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="85.04px" height="85.04px" viewBox="0 0 85.04 85.04" enable-background="new 0 0 85.04 85.04" xml:space="preserve">
<g>
	<g>
		<circle fill="#706F6F" cx="42.466" cy="42.143" r="20.582"/>
	</g>
	<g>
		<g>
			<circle fill="#FFFFFF" cx="42.466" cy="42.143" r="18.5"/>
		</g>
		<circle fill="#CE1222" cx="42.466" cy="42.143" r="13.5"/>
	</g>
</g>
</svg>

Answer 1

我在 SVG 文件上尝试了你的代码，它在 Chrome 和 IE 上也能正常工作，无论如何我在 IE 上遇到了 SVG 的一些问题，我意识到我必须用像素分配宽度和高度。

例如你写的：

width="35"
height="35"

但对于 IE，你必须这样写：

width="35px"
height="35px"

这是基于我对 SVG 的了解以及将它们与 IE 一起使用，希望对您有所帮助:)