Javascript 内联SVG在google地图中不显示为标记

我在Illustrator CC中创建了一个SVG，该SVG在inline JS中声明为变量，尝试了Illustrator提供的所有选项，但并没有SVG的工作。我试图在谷歌地图中使用这个变量作为标记。 我发现了这篇文章：使用其中的内联SVG可以工作，但我的SVG不行。 有人知道我应该如何将SVG保存在Illustrator中，以使其在Google地图中用作标记吗？ 以下是我正在使用的代码（在本例中，我使用的是本文中的内联SVG）：

#地图，html，正文{
填充：0；
保证金：0；
身高：90%；
}
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：新google.maps.LatLng（41.0257978,21.293566），
mapTypeId:google.maps.mapTypeId.SATELLITE，
disableDefaultUI:true，
动物控制：错误
});
var myIcon=new google.maps.MarkerImage（'数据：image/svg+xml；utf-8\
\
\
，null，null，null，new google.maps.Size（21,30））；
google.maps.event.addListener（映射，'click'，函数（e）{
var myLatLng={lat:e.latLng.lat（），lng:e.latLng.lng（）}；
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
图标：myIcon
});
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
A.

这就是我尝试使用的SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2DB450;}
    .st1{fill:#FFFFFF;}
</style>
<g transform="translate(40 -93)">
    <circle class="st0" cx="-255" cy="490" r="45"/>
    <path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490
        l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/>
</g>
</svg>

.st0{fill:#2DB450；}
.st1{fill:#FFFFFF；}

编辑：我发现，如果我保存SVG文件并在url参数中使用文件名，而不是在其中嵌入SVG代码，那么它在所有浏览器上都能工作。但遗憾的是，我不得不嵌入代码。有人对此提出解决方案吗？

将您发布代码中的“红框白框”SVG替换为您也发布的SVG（如评论中所述，要在Chrome以外的浏览器中工作，

#

必须是URL编码的）：

将您发布代码中的“红框白框”SVG替换为您也发布的SVG（如评论中所述，要在Chrome以外的浏览器中工作，

#

必须采用URL编码）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2DB450;}
    .st1{fill:#FFFFFF;}
</style>
<g transform="translate(40 -93)">
    <circle class="st0" cx="-255" cy="490" r="45"/>
    <path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490
        l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/>
</g>
</svg>

var myIcon = {
  url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
  size: new google.maps.Size(32, 32),
  scaledSize: new google.maps.Size(20, 20)
};