如何将SVG代码转换为javascript函数，为google map marker创建SVG代码

我已经生成了一个svg图标，我想操纵填充颜色。我只是不知道如何将这个svg代码转换成可操作的javascript函数

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, 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="0px" y="0px"
 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path fill="#48B3CC" d="M256,0C149.969,0,64,85.969,64,192c0,43.188,14.25,83,38.313,115.094L256,512l153.688-204.906
C433.75,275,448,235.188,448,192C448,85.969,362.031,0,256,0z M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128
c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z"/>
<circle fill="#FFFFFF" cx="255.5" cy="191.5" r="129"/>
</svg>

---

我不知道将

标记放入此代码的何处。感谢有人能帮助您使用js动态添加svg元素，您需要创建svg元素

以下函数返回可附加到sag元素的svg圆：

function drawCircle(cx, cy, r, fill, id //optional) {
    var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
    circle.setAttribute("cx", cx);
    circle.setAttribute("cy", cy);
    circle.setAttribute("r", 0);
    circle.setAttribute("fill", fill);

    if (typeof (id) !== 'undefined') {
    circle.setAttribute("id", id);
    }
            return circle;
}

然后，您可以将圆添加到svg中，如图所示

 var circle = drawCircle(255.5, 191.5, 129, "#FFFFFF", 'myCircle');
 svg.appendChild(circle); //  where svg refers to your actual svg element

稍后，您可以使用id更改其属性，如下所示

var circle =document.getElementById('myCircle');
circle.setAttribute("fill", 'new color');

---

要将圆添加到google图标路径，可以将其转换为圆弧。但是，我认为最好的方法是为每个图标填充创建单独的svg文件。与构建svg路径图标不同，您将使用如下svg文件（注意，您必须更改viewBox或内置Illustrator，因此svg将与图标大小相同）：

然后，当您要添加标记时：

    GreenMarker = new google.maps.Marker(
    {
        position: location,
        map: MyMap,
        icon: MyGreenSVG
    });

   RedMarker = new google.maps.Marker(
    {
        position: location,
        map: MyMap,
        icon: MyRedSVG
    });

---

检查这篇文章：您是想动态生成整个svg，还是只想更改元素填充颜色？只是填充颜色。不知道如何放置

圆圈

标记并精确缩放它如果看看我上面的问题，我不能简单地将其应用到svg上，因为我使用了google Map。您想更改单个svg标记的填充，还是所有使用此特定svg路径+圆圈的标记的填充？我有一些其他颜色，而不仅仅是两种。很抱歉

MyGreenSVG = {
    url: 'greenFill.svg',
    size: new google.maps.Size(10, 10),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(5, 5)
    };

 MyRedSVG = {
    url: 'redFill.svg',
    size: new google.maps.Size(10, 10),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(5, 5)
    };

    GreenMarker = new google.maps.Marker(
    {
        position: location,
        map: MyMap,
        icon: MyGreenSVG
    });

   RedMarker = new google.maps.Marker(
    {
        position: location,
        map: MyMap,
        icon: MyRedSVG
    });