谷歌地图 - SVG 标记被切断

Question

为什么我的 google.maps.Marker svg 图标被切断了？我尝试了许多 size 和 scaledSize 的组合......

var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: el.lat, lng: el.lon}),
            icon: {
                url: "/images/icons/observation_" + el.rate + ".svg",
                size: new google.maps.Size(20, 20),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(10, 10),
                scaledSize: new google.maps.Size(20, 20)
            },
            zIndex: 6,
            map: map.map
        });

Svg 图标应为 20x20 像素。

https://jsfiddle.net/d3v5huzr/

这里是预览：

Answer 1

您必须像这样设置 svg 元素的宽度和高度属性：

<svg height="40px" width="40px" ... >

https://jsfiddle.net/zvtnohyv/