Jquery 将svg图像渲染为google地图标记

我有一个svg图像如下

<svg version="1.1" id="svgBusMarker" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g><path id="SVG_Timing" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#92E0A4" stroke-width="4.2823" stroke-miterlimit="22.9256" d="M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z"/>
    <path id="SVG_Violation" fill-rule="evenodd" clip-rule="evenodd" fill="#FF0000" d="M19.901,31.597h10.198v10.197H19.901V31.597z"/>
    <path id="SVG_Speed" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFF00" d="M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996   s-7.521,1.516-10.198,3.996L25,0z"/>
</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">.SVG_Timing{fill:#FFFFFF;stroke:#92E0A4;}.SVG_Violation{fill:#FF0000;stroke:#2B2E33;}.SVG_Speed{fill:#92E0A4}</style><path class="SVG_Timing" d="M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z"/><path class="SVG_Violation" d="M19.901,31.597h10.198v10.197H19.901V31.597z" /><path class="SVG_Speed" d="M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996s-7.521,1.516-10.198,3.996L25,0z"/></svg>',
                size: new google.maps.Size(32, 32),
                scaledSize: new google.maps.Size(20, 20)
            };

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(triangleCoords[0].lat, triangleCoords[0].lng),
                map: gmap,
                icon: myIcon,
                id: 1,
                optimized: false
            });

var myIcon={
url:'data:image/svg+xml；utf-8，.svg#计时{fill:#FFFFFF；笔划：#92E0A4；}.svg#u违规{fill:#FF0000；笔划：#2B2E33；}.svg#速度{fill:#92E0A4}，
大小：新的google.maps.size（32,32），
scaledSize:new google.maps.Size（20,20）
};
marker=新的google.maps.marker({
位置：新建google.maps.LatLng（triangleCoords[0].lat，triangleCoords[0].lng），
地图：gmap，
图标：我的图标，
id:1，
优化：错误
});

但我无法实现我的目标。我不想使用叠加。请有人帮帮我

---

提前谢谢

您可以这样渲染SVG标记

因为没有fillRule，所以最好将其作为图标转换为SVG文件

    var icon = {
        path: "M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z M19.901,31.597h10.198v10.197H19.901V31.597z M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996   s-7.521,1.516-10.198,3.996L25,0z",
        fillColor: '#FF0000',
        fillOpacity: 1,
        anchor: new google.maps.Point(25,25),
    }

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        icon: icon,
    });

---

为什么不将其转换为

.svg

文件，并像普通图像一样使用它？他的图标有多种颜色/pathsyeah，但自从我遇到同样的问题并最终得到了一个svg文件后，我就没怎么研究过。如果您能提供任何想法或建议，我们将不胜感激！