Question

我有一张我在rails中使用google maps for rails gem创建的地图。它适用于Chrome和Safari，但它不会在Firefox 29中显示自定义.svg标记。它会显示群集的自定义图像（这是一个png）。

我已经碰到了很久以来的一些话题（FF 8和9），他说有一个问题在9或10个与cors有关的问题得到了解决。然而，它似乎暂时不是一个问题，特别是对于29。

有谁知道这是火狐问题还是谷歌地图的rails gem问题？如果它是一个什么是解决方案。

更新为png交换svg现在可以正常工作。然而，这并不能解决潜在的问题。我想使用svg，所以我可以传入颜色变量。

仍然没有运气，chrome和firefox都显示该图像正在开发人员工具中下载。图像目录中的firefox和chrome中可以查看该图像。以下是我的SVG的代码：

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

Answer 1

尝试为SVG定义宽度和高度

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

我发现在绘制没有定义宽度/高度的SVG时它会很挑剔。

<强>加成

@Justin Lau补充说，在Javascript中定义的标记需要原始大小，即使你使用的是scaledSize

非常感谢Justin的贡献。

Answer 2

需要添加细节 - 当通过数据URL提供SVG并且SVG是URL编码的（不是base64 ..）时，Firefox似乎会窒息＃＆＃39;＃＆＃39;所以我不得不切换到使用fill="rgb()"符号和/或命名颜色。

有关何时/何时使用SVG数据网址的一些参考：https://codepen.io/tigt/post/optimizing-svgs-in-data-uris How to use SVG markers in Google Maps API v3

希望这有助于某人！

Answer 3

要补充Idiot211的答案，除了将width和height属性添加到SVG元素之外，还必须使用size定义标记图标对象，以使其适用于FireFox，如果您之前只有scaledSize。

// es6 syntax
const markerIcon = {
    url: '../map-marker.svg',
    size: new google.maps.Size(100, 100),     // original size you defined in the SVG file
    scaledSize: new google.maps.Size(50, 50), // desired display size
    anchor: new maps.Point(25, 50),
};

Google地图中的自定义标记未显示在Firefox中

3 个答案: