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

Question

我正在为 Google 地图标记使用自定义图标。我想对标记应用样式；特别是线性梯度。当我将下面的 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'
});

欢迎任何解决方案。

Answer 1

知道了。谷歌地图不喜欢网址中的#。这有效：

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

\u0023 是 # 的 unicode（我认为）。