Javascript 动态设置Google Maps SVG路径图标的线性渐变

我正在使用谷歌地图标记的自定义图标。我想将样式应用于标记；特别是线性梯度。当我将下面的xyz代码作为一个简单的HTML文档正常运行时，它可以工作，但当我尝试用Javascript运行它时，它就不工作了

var xyz = 'data:image/svg+xml;utf-8, \
    <svg width="30" height="60" xmlns="http://www.w3.org/2000/svg"> \
        <defs><linearGradient id="mygx"> \
            <stop offset="5%" stop-color="yellow"/> \
            <stop offset="95%" stop-color="red"/> \
        </linearGradient></defs> \
        <path fill="url(#mygx)" stroke="black" stroke-width="1.5" d="M0 0 L0 35 L15 60 L30 35 L30 0 L0 0Z"></path> \
        </svg>';

var myIcon = {
    url: xyz,
    fillOpacity: 0.7,
    scale: 1
};

var marker = new google.maps.Marker({
    position: markerLocation,
    icon: myIcon,
    map: map,
    title: 'hello'
});

var xyz='数据：image/svg+xml；utf-8\
\
\
\
\
\
\
';
var myIcon={
网址：xyz，
不透明度：0.7，
比例：1
};
var marker=new google.maps.marker({
位置：markerLocation，
图标：我的图标，
地图：地图，
标题：“你好”
});

---

欢迎任何解决方案

明白了。谷歌地图不喜欢url中的#。这项工作：

<path fill="url(\u0023mygx)"...

---

从这个网站判断，解决方案是encodeURIComponent（），但我还没有弄明白：