Debugging 谷歌地图SVG图像标记图标未显示在IE11中

我一直在研究的一个站点上存在一个问题，由于某种原因，SVG图像标记没有出现在IE 11中

我有两套标记：

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

我对不支持SVG的旧浏览器使用回退（使用Modernizer进行测试）。我正在使用旧的IE11谷歌图表标记来让它工作（测试用户代理字符串来识别它）

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

• 原因

• 是否在IE11边缘模式下出错（将文档模式切换到10以使其正常工作）

• 或者是谷歌的失败

该网站是：

---

如果在IE 11中更改用户代理字符串，而将其保留在边缘文档模式下，则可能会看到它失败。

IE实现在以下方面偏离SVG标准：

标记元素的属性在引用点继承，而不是从标记元素的祖先继承

参考资料

---

谷歌地图目前似乎并不真正支持使用SVG图像作为标记。这一事实很容易被忽略，因为事实证明SVG标记图像确实可以在Chrome和Opera中使用

但是，GoogleMapsAPI（v3）专门提供了用于在地图标记中显示矢量路径的对象。我发现在中指定矢量图像允许它在IE和其他浏览器中工作

示例（来自谷歌地图文档，）：

var goldStar={
路径：“M 125,5 155,90 245,90 175145 200230 125180 50230 75145 5,90 95,90 z”，
fillColor:'黄色'，
填充不透明度：0.8，
比例：1，
strokeColor:“金色”，
冲程重量：14
};
var marker=new google.maps.marker({
位置：map.getCenter（），
图标：金星，
地图：地图
});

---

（也要感谢）

如果SVG支持较低的IE版本，则添加meta以模拟IE10/IE9

---

ie）对于ie-10

实际上，对于我来说，添加标记

优化：false

和图标

缩放尺寸：新的google.maps.Size（25，25）

对我来说就是这样。因此，即使Nick F所说的是真的（它没有得到官方支持），它也是有效的

SVG标记开始出现在IE11中。似乎

scaledSize

在

元素上添加了样式

width

和

height

，不确定在这种情况下

optimized

做了什么

例如：

        var marker = new google.maps.Marker({
            map: map,
            position: poi.geometry.location,
            title: poi.name,
            zIndex: 99,
            optimized: false,
            icon: {
                url: 'loremipsum.svg',
                scaledSize: new google.maps.Size(25, 25),
                size: new google.maps.Size(25, 25),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12.5, 12.5)
            }
        });

---

信用证：

您应该在问题中添加一些概念验证代码，而不仅仅是链接到网站。可能的解决方案是：这一切都很好，但如何为包含多个不同颜色路径的svg文件创建此对象表示法（goldStar）。我如何在这个符号中组合它们。这真的是一个单独的问题！虽然根据图标必须是一个单一的路径，所以这可能是不可能的。这只适用于简单的单色形状图标。复杂的分层SVG图标有一些问题可以在这里解决：对于这个答案，这里对术语“标记”的解释不正确。这对我使用复杂的SVG图标（多个形状）没有任何帮助。