Google 地图 SVG 图像标记图标未在 IE11 中显示

我一直在处理的一个网站上存在一个问题，由于某种原因，SVG 图像标记没有显示在 IE 11 中。

我有两组标记：

• 默认缩小的郊区有 PNG 标记
• 放大有地址特定编号的 SVG

我对不支持 SVG 的旧版浏览器使用后备（使用 Modernizr 进行测试）。我正在使用 IE 11 的旧 Google 图表标记来使其正常工作（测试用户代理字符串来识别它）。

我想知道是否有人有以下想法：

• 原因

• 是否是 IE11 Edge 模式搞砸了（将文档模式切换到 10 以使其正常工作）

• 或者谷歌失败的事情。

该网站是：

http://artstrail.org.au/arts-trail.php http://artstrail.org.au/arts-trail.php

如果您在 IE 11 中更改用户代理字符串，同时将其保留在边缘文档模式下，您会发现它会失败。

看来 Google 地图目前并不真正支持使用 SVG 图像作为标记。这个事实很容易被忽视，因为事实证明 SVG 标记图像确实可以在例如。 Chrome 和 Opera。

然而，Google Maps API (v3) 特别提供Symbol https://developers.google.com/maps/documentation/javascript/symbols用于在地图标记中显示矢量路径的对象。我发现指定矢量图像SVG 路径表示法 http://www.w3.org/TR/SVG/paths.html#PathData允许它在 IE 和其他浏览器中工作。

示例（来自 Google 地图文档，here https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom):

var goldStar = {
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  fillColor: 'yellow',
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: 'gold',
  strokeWeight: 14
};

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: goldStar,
  map: map
});

（谢谢这个答案 https://stackoverflow.com/a/24426400/180500 too)