javascript - 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 一起使用，希望对您有所帮助:)