自定义 SVG 标记不会在 IE 11 中显示 [英] Custom SVG markers won't display in IE 11

问题描述

我正在尝试使用 Google 数据层显示一些公交路线，然后添加一些自定义图标标记.在 Chrome 和 Firefox 中效果很好，但在 IE 11 中我只得到路由.我在一些混淆代码的深处发现了一个 InvalidStateError.

I'm trying to display some bus routes using Google Data Layer, and then add some custom icon markers. Works great in Chrome and Firefox, but in IE 11 I only get the routes. I get an InvalidStateError somewhere deep in some obfuscated code.

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

the markers use a data uri with some inline SVG that is converted to base 64 strings. I've also tried NOT converting to base 64; that doesn't generate any apparent errors, but the markers still don't display.

下面粘贴了简化的 javascript，您可以在 jsfiddle 中看到它的实际效果.

Simplified javascript is pasted below, and you can see it in action at 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;
  }

推荐答案

我遇到了类似的问题，最终发现可以让 SVG 和数据 URI SVG 图像正常工作，但有些参数对于其他图像类型不需要SVG 是必需的.具体来说，一旦我定义了图标的 size 和 scaledSize 参数(以及 uri、origin 和 anchor 值)，错误就会消失并呈现标记.我的示例标记如下(svg 已经被定义为我想要作为标记的 SVG):

I had a similar problem, and eventually found that you can get SVG and data URI SVG images working, but some parameters that aren't required for other image types are required for SVG. Specifically, once I size and scaledSize parameters on the definition for the icon (along with uri, origin and anchor values), the error went away and the marker rendered. My sample marker is as follows (with svg having already been defined to be the SVG I want as the marker):

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

这篇关于自定义 SVG 标记不会在 IE 11 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！