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

Dynamically setting a linear gradient to a Google Maps SVG path icon

本文关键字：地图 SVG 路径 图标 Google 线性 渐变 设置 动态      更新时间：2023-09-26

我正在使用谷歌地图标记的自定义图标。我想将样式应用于标记;特别是线性梯度。当我将其作为简单的HTML文档正常运行时，下面的xyz代码可以工作，但是当我尝试在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'
});

欢迎任何解决方案。

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

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

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

相关文章：