IE 11中不会显示自定义SVG标记

Question

我正在尝试使用Google数据层显示一些公交路线,然后添加一些自定义图标标记.适用于Chrome和Firefox,但在IE 11中我只能获得路线.我在一些混淆的代码深处得到一个InvalidStateError.

标记使用带有内联SVG的数据uri,该SVG转换为base 64字符串.我也尝试过不转换为base 64; 这不会产生任何明显的错误,但标记仍然不会显示.

下面粘贴了简化的javascript,你可以在jsfiddle中看到它.

    var map;

    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: {lat: 38.813605, lng: -89.957399}
    });

    var geoJsonRoutesUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Routes.json';

    var routesLayer = new google.maps.Data(); 
    routesLayer.loadGeoJson(geoJsonRoutesUrl);
    routesLayer.setMap(map);  
    routesLayer.setStyle(function(feature) {
      return ({
        strokeColor: feature.getProperty('color'),
      fillColor: feature.getProperty('color'),
        strokeWeight: 6
      });
    });

    var geoJsonRouteMarkersUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Route-Markers.json';
    var routeMarkersLayer = new google.maps.Data(); 
    routeMarkersLayer.loadGeoJson(geoJsonRouteMarkersUrl);
    routeMarkersLayer.setMap(map);
    routeMarkersLayer.setStyle(function(feature) {
    var markerIcon = CreateRouteMarkersIconDefinition(
        feature.getProperty('route'),
        feature.getProperty('color'),
        feature.getProperty('backColor'));
      return ({icon: markerIcon});
    });


  function CreateRouteMarkersIconDefinition(route, color, backColor) {
    var svgHtml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30">';
    svgHtml += '<ellipse cx="15" cy="15" r="15" rx="15" ry="10" fill="' +  backColor + '" />';
    svgHtml += '<text x="15" y="20" style="text-anchor: middle;" font-family="Verdana" font-size="12px" font-weight = "bold" fill="' + color + '" >' + route + '</text>';
    svgHtml += '</svg>';
    var svgIcon = {
      url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgHtml),
      anchor: new google.maps.Point(15, 15)
    };

    return svgIcon;
  }

Answer 1

我有一个类似的问题,并最终发现你可以使SVG和数据URI SVG图像工作,但SVG需要一些其他图像类型不需要的参数.具体来说,一旦我在图标的定义上设置了尺寸和scaledSize参数(以及uri,原点和锚点值),错误就会消失并且标记会被渲染.我的样本标记如下(svg已被定义为我想要的SVG作为标记):

var bubbleImage = {
              url: 'data:image/svg+xml;base64,' + Base64.encode(svg),
              size: new google.maps.Size(192, 21),
              scaledSize: new google.maps.Size(192,21),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(88, 53)
          };
          var bubbleMarker = new google.maps.Marker({
              position: feature.position,
              icon: bubbleImage,
              map: window.map,
              optimized: false,
              zIndex: 1
          });

Answer 2

MDN（Mozilla 开发者网络）中的此参考指出“Internet Explorer 8 及更高版本仅支持 CSS、 和 中图像的数据 URI”。我想这只是 IE 不支持的。还有什么是新的？