7

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

我有两组标记：

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

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

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

  • 原因

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

  • 或谷歌失败的东西。

该网站是：

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

如果您在 IE 11 中更改用户代理字符串，同时将其置于边缘文档模式，您会看到它失败。

4

4 回答 4

6

谷歌地图目前似乎并不真正支持使用 SVG 图像作为标记。这个事实很容易被忽视，因为事实证明 SVG 标记图像确实有效，例如。铬和歌剧。

但是，Google Maps API (v3) 专门提供了Symbol对象，用于在地图标记中显示矢量路径。我发现在SVG 路径表示法中指定矢量图像允许它在 IE 和其他浏览器中工作。

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

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
});

（也感谢这个答案）

于 2014-10-28T12:24:38.637 回答
5

实际上，对我来说添加标记optimized: false和图标scaledSize: new google.maps.Size(25, 25)对我有用。因此，即使 Nick F 所说的是真的（它没有得到官方支持），它仍然有效。

SVG 标记开始出现在 IE11 中。似乎在元素上scaledSize添加了一种样式width，不确定在这种情况下会做什么。height<img>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 标记不显示在 IE 11 上

于 2017-04-26T19:33:55.060 回答
-1

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

标记元素的属性在参考点继承，而不是从标记元素的祖先继承。

参考

MS-SVG：“标记”元素

于 2014-02-28T23:34:15.060 回答
-1

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

即）对于 IE-10<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

于 2015-10-21T10:44:01.457 回答