谷歌地图SVG图像标记图标IE11

没有显示有一个网站，我一直在努力，由于某种原因SVG图像标记未显示在IE 11谷歌地图SVG图像标记图标IE11

了一个问题，我有两套标记：

默认缩小对郊区
放大具有解决特定编号的SVG那些

我使用的为D旧版本浏览器的回退PNG标志不支持SVG（用modernizr测试它）。我正在使用IE 11的旧版Google图表标记来使其工作（测试用户代理字符串以标识它）。

我想知道如果任何人有一个想法：不论是什么搞砸了IE11 EDGE模式

原因
（切换文档模式，以10得到它去工作）
或者是与谷歌一起失败的东西。

该网站是：

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

你可以看到，如果你更改用户代理字符串中的IE 11，而在Edge文档方式离开它，它失败。

来源

2013-11-01 Harris

您应该添加验证的概念一些代码，你的问题，不只是链接到一个网站。 – duncan

能可能可行的解决方案是在这里：http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

看来，谷歌地图真的不支持使用SVG图像在此刻标记。这个事实很容易被忽略，因为事实证明，SVG标记图像确实可以工作，例如。 Chrome和Opera。

但是，Google Maps API（v3）专门提供Symbol对象来显示地图标记中的矢量路径。我发现在SVG path notation中指定矢量图像允许它在IE和其他浏览器中工作。

例（从谷歌地图文档，here）：

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

（感谢this answer太）

来源

2014-10-28 12:24:38

这是非常好的，但我怎么创建一个包含有不同颜色的多个路径的SVG文件这个对象表示法（金星）。我如何将这些符号结合起来。 – Prabhas

这真是一个单独的问题！根据尽管[这个答案]（http://stackoverflow.com/a/26321678/180500）图标必须是一个单一的路径，所以它可能是不可能的。 –

这只适用于简单的一种颜色形状图标。复杂的分层SVG图标有可能在这里解决的问题：http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

-1

的IE执行从SVG标准偏离在以下方面：一个标记元件的

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

参考

MS-SVG: The 'marker' element

来源

2014-02-28 23:34:15

该术语“标记”是错误解释这里这个答案。 –

-1

添加元模拟IE10/IE9如果SVG在低版本的IE支持。

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

来源

2015-10-21 10:44:01 mysticmo

这什么也没做，我使用复杂的SVG图标时（不止一种形状）。 –

实际上，对于我添加标记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) 
      } 
     });

信用：Google Maps SVG marker doesn't display on IE 11

来源

2017-04-26 19:33:55

谷歌地图SVG图像标记图标IE11

回答

相关问题