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

Question

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

文件大小为4100字节。

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

VectorData::operator[]

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

另外我注意到它在访问SVG http://localhost/static/rdot.svg

的完整路径后开始正确渲染

// Generic matrix storage
template<class T, std::size_t N>
class MatrixData
{
private:
    T m_data[N];

public:
    T& operator[](int i) { return m_data[i]; }
    const T& operator[](int i) const { return m_data[i]; }
};

// Generic matrix class
template<class T, std::size_t ROWS, std::size_t COLS, class Storage = MatrixData<T, ROWS*COLS>>
class Matrix : public Storage
{
    // Matrix functionality here
};



// Specialized storage for Vectors, generic version
template<class T, std::size_t N>
class VectorData : public MatrixData<T, N> { };

// Specialized storage for Vector<T, 4>
template<class T>
class VectorData<T, 4>
{
public:
    T x, y, z, w;

    T& operator[](int i) { return (&x)[i]; }
    const T& operator[](int i) const { return (&x)[i]; }
};

template<class T, std::size_t N>
struct Vector : public Matrix<T, N, 1, VectorData<T, N>>
{
    // your other stuff here
};

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

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;