Firefox / Edge中的Google Maps API标记SVG呈现，但不是Chrome

Question

我的带有徽标的自定义SVG在Chrome上显示为常规红点，我不知道为什么，但它应该呈现为徽标。 Mozilla Firefox 57.0和Edge可以完美呈现所需的徽标。我已多次清除缓存以验证并为Chrome打开新的隐身窗口，但它无效。

文件大小为4100字节。

作为Google地图标记在JavaScript中导入：

var rIcon = {
    url: 'static/rdot.svg',
    scaledSize: new google.maps.Size(50, 50), // scaled size 16 px
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
  };

Chrome可能不喜欢图标本身中的任何内容吗？我对SVG规则了解不多。

另外我注意到它在访问SVG http://localhost/static/rdot.svg的完整路径后开始正确渲染

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 500 500">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
                                                                                                    
<?xpacket end="w"?></metadata>
<defs>
    <style>
      .cls-1 {
        fill: #bf311a;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-opacity: 0.7;
        stroke-width: 38px;
        opacity: 0.9;
      }
    </style>
  </defs>
  <circle class="cls-1" cx="250" cy="250" r="210"/>
  <image x="198" y="122" width="104" height="256" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAABNCAQAAAD04XdOAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfhDB0JDDDz8kTrAAADG0lEQVRYw+2YO0wUQRjHf7P34oBDBI7jTfBBPK00xppCTUwsbNQYqey1sbC1sNFCiSRWFhoSC2MhMbG38JEYCwMBDAF8cDyO8IbzXrtrccexu7Pg7NFI4tds5r/zm/nm29nZ71thfqSTZXY3DZN55vnGZ95ibN8Q5hwxsvzdgsXrKPd5vo2PcIglBRzAxEcM6OfWllteTGCQYIWb3CgHLxCb5HhEtDwcNJLU0FsuDgI4C+CXbuVpwWdT1lh3TCPIEKeGNb80bi2DfCUAQI5GjnKKVhIIhKVfikY6GJbxCM94Y9PiPKGHaZtPeWppYdht7fWO9igXSDhUA0HMPXRCUtI8JuzAoVM98h8wpTAb6vgUSSocmq6OzzBFlbxIVdzEkPoe9rLr5DMh7AX/JSl5L3jQTSzvlfkXcG1vuLk3fHJveMoLrkuK3wsekBRPoetyE9VxIXET6niQavKOwTyErp4OUpa2jywL6vhxGkhb2hUs7uT8uot2B2zOV/KTpNtXxqCN+tK5lqWOOL2cY84SPBPBMLh93wU6mdLbnSNCAzBrO6wETVzlpdvsOpXUlRIQjRxJdKzLNGgmwSC44RppW5DkxYXRuEvGHd/NBBrNQB9PC4I6bhCkihCT9NO3JarigmqGeM17PlllVdwkR4zzHKGbAczSqNKDM6ikohh5gUGKPAIwCBAhDIxxhaGdcOtz1wnQQp7Zkpcm0MIycebdnNeIcpuB4q7LU0EP92hlpphbCGCaNh5y3W12jRiXeWUb8hhfyLNh2bSVRDjBmPsrE3G0x3hAjU3ZQONSYTYVe0HalpwI4Iw6Ps4QB2y4QaeX9GDE0TNNlKg6PuFop6mjSR1fwH7W+siRVsc3HXiOai953Xd0W1Kq4+egOi5c2tny8aLt39zmP74P8AC+7dPdO75B2q2vKv6DBULl40FC1p8OgKdKapUlafagOr7Cog3X8VhJrUqKzws+LimxvRViXV7wBPbevzlJjTo+RsaW06/Tzmk/dYQspb0GUqVcsFGStFv+L5nANT9TGJb6VKPJJcYAGd5xkRmL0kD3Hxf8zaNEFOrVAAAAAElFTkSuQmCC"/>
</svg>

Answer 1

你的svg中有一个拼写错误xlink:href="data:img/png;base64,应该是xlink:href="data:image/png;base64,（img vs. image）：

<image x="198" y="122" width="104" height="256" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAABNCAQAAAD04XdOAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfhDB0JDDDz8kTrAAADG0lEQVRYw+2YO0wUQRjHf7P34oBDBI7jTfBBPK00xppCTUwsbNQYqey1sbC1sNFCiSRWFhoSC2MhMbG38JEYCwMBDAF8cDyO8IbzXrtrccexu7Pg7NFI4tds5r/zm/nm29nZ71thfqSTZXY3DZN55vnGZ95ibN8Q5hwxsvzdgsXrKPd5vo2PcIglBRzAxEcM6OfWllteTGCQYIWb3CgHLxCb5HhEtDwcNJLU0FsuDgI4C+CXbuVpwWdT1lh3TCPIEKeGNb80bi2DfCUAQI5GjnKKVhIIhKVfikY6GJbxCM94Y9PiPKGHaZtPeWppYdht7fWO9igXSDhUA0HMPXRCUtI8JuzAoVM98h8wpTAb6vgUSSocmq6OzzBFlbxIVdzEkPoe9rLr5DMh7AX/JSl5L3jQTSzvlfkXcG1vuLk3fHJveMoLrkuK3wsekBRPoetyE9VxIXET6niQavKOwTyErp4OUpa2jywL6vhxGkhb2hUs7uT8uot2B2zOV/KTpNtXxqCN+tK5lqWOOL2cY84SPBPBMLh93wU6mdLbnSNCAzBrO6wETVzlpdvsOpXUlRIQjRxJdKzLNGgmwSC44RppW5DkxYXRuEvGHd/NBBrNQB9PC4I6bhCkihCT9NO3JarigmqGeM17PlllVdwkR4zzHKGbAczSqNKDM6ikohh5gUGKPAIwCBAhDIxxhaGdcOtz1wnQQp7Zkpcm0MIycebdnNeIcpuB4q7LU0EP92hlpphbCGCaNh5y3W12jRiXeWUb8hhfyLNh2bSVRDjBmPsrE3G0x3hAjU3ZQONSYTYVe0HalpwI4Iw6Ps4QB2y4QaeX9GDE0TNNlKg6PuFop6mjSR1fwH7W+siRVsc3HXiOai953Xd0W1Kq4+egOi5c2tny8aLt39zmP74P8AC+7dPdO75B2q2vKv6DBULl40FC1p8OgKdKapUlafagOr7Cog3X8VhJrUqKzws+LimxvRViXV7wBPbevzlJjTo+RsaW06/Tzmk/dYQspb0GUqVcsFGStFv+L5nANT9TGJb6VKPJJcYAGd5xkRmL0kD3Hxf8zaNEFOrVAAAAAElFTkSuQmCC"/>

应该 ：

<image x="198" y="122" width="104" height="256" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAABNCAQAAAD04XdOAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfhDB0JDDDz8kTrAAADG0lEQVRYw+2YO0wUQRjHf7P34oBDBI7jTfBBPK00xppCTUwsbNQYqey1sbC1sNFCiSRWFhoSC2MhMbG38JEYCwMBDAF8cDyO8IbzXrtrccexu7Pg7NFI4tds5r/zm/nm29nZ71thfqSTZXY3DZN55vnGZ95ibN8Q5hwxsvzdgsXrKPd5vo2PcIglBRzAxEcM6OfWllteTGCQYIWb3CgHLxCb5HhEtDwcNJLU0FsuDgI4C+CXbuVpwWdT1lh3TCPIEKeGNb80bi2DfCUAQI5GjnKKVhIIhKVfikY6GJbxCM94Y9PiPKGHaZtPeWppYdht7fWO9igXSDhUA0HMPXRCUtI8JuzAoVM98h8wpTAb6vgUSSocmq6OzzBFlbxIVdzEkPoe9rLr5DMh7AX/JSl5L3jQTSzvlfkXcG1vuLk3fHJveMoLrkuK3wsekBRPoetyE9VxIXET6niQavKOwTyErp4OUpa2jywL6vhxGkhb2hUs7uT8uot2B2zOV/KTpNtXxqCN+tK5lqWOOL2cY84SPBPBMLh93wU6mdLbnSNCAzBrO6wETVzlpdvsOpXUlRIQjRxJdKzLNGgmwSC44RppW5DkxYXRuEvGHd/NBBrNQB9PC4I6bhCkihCT9NO3JarigmqGeM17PlllVdwkR4zzHKGbAczSqNKDM6ikohh5gUGKPAIwCBAhDIxxhaGdcOtz1wnQQp7Zkpcm0MIycebdnNeIcpuB4q7LU0EP92hlpphbCGCaNh5y3W12jRiXeWUb8hhfyLNh2bSVRDjBmPsrE3G0x3hAjU3ZQONSYTYVe0HalpwI4Iw6Ps4QB2y4QaeX9GDE0TNNlKg6PuFop6mjSR1fwH7W+siRVsc3HXiOai953Xd0W1Kq4+egOi5c2tny8aLt39zmP74P8AC+7dPdO75B2q2vKv6DBULl40FC1p8OgKdKapUlafagOr7Cog3X8VhJrUqKzws+LimxvRViXV7wBPbevzlJjTo+RsaW06/Tzmk/dYQspb0GUqVcsFGStFv+L5nANT9TGJb6VKPJJcYAGd5xkRmL0kD3Hxf8zaNEFOrVAAAAAElFTkSuQmCC"/>

related link

proof of concept fiddle

代码段：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var rIcon = {
    url: 'http://www.geocodezip.com/mapIcons/SO_20180103a.svg',
    scaledSize: new google.maps.Size(50, 50), // scaled size 16 px
    origin: new google.maps.Point(0, 0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
  };
  var marker = new google.maps.Marker({
    icon: rIcon,
    position: map.getCenter(),
    map: map
  })

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<img src="http://www.geocodezip.com/mapIcons/SO_20180103a.svg" />
<div id="map_canvas"></div>