为什么此 SVG 未显示在 Google 地图 (JavaScript) 中？

Question

我正在使用 SVG 文件在 map 中显示图标，但一个特定的 SVG 不起作用。 我已经测试了该文件，它在浏览器中看起来不错，但是，在代码中执行此操作时，它只是不显示任何内容，也没有失败：

let svgColor = 'red';
let strokeColor = "#00a0d6";

let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
};
return icon_;

之前听说有些SVG复杂文件Google Service不识别，会不会是这样？

我准备了一个jsfiddle测试： http://jsfiddle.net/9u2kgxth/

代码片段（来自小提琴）：

 var map; var polyLine; var polyOptions; var rotation = 0; function initialize() { var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(0, 0) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); google.maps.event.addListener(map, 'click', function(event) { addPoint(event); }); } function addPoint(event) { let svgColor = 'red'; let strokeColor = "#00a0d6"; let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; var svg = '<svg height="40" width="150">' + innerSvg + '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' + '</svg>'; const icon_ = { url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg), anchor: new google.maps.Point(15, 30), }; var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); map.panTo(event.latLng); rotation += 10; } initialize();

 body { font-family: Arial; font-size: 20px; line-height: 40px; } #map-canvas { height: 400px; width: 500px; }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> Click on map to add markers... <div id="map-canvas"></div>

Answer 1

您的<svg>缺少命名空间（正如@RobertLongson 在他的评论中指出的那样）：

var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

应该：

var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

概念证明小提琴

代码片段：

 var map; var polyLine; var polyOptions; var rotation = 0; function initialize() { var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(0, 0) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); addPoint({ latLng: map.getCenter() }) google.maps.event.addListener(map, 'click', function(event) { addPoint(event); }); } function addPoint(event) { let svgColor = 'red'; let strokeColor = "#00a0d6"; let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>'; var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' + innerSvg + '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' + '</svg>'; const icon_ = { url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg), anchor: new google.maps.Point(15, 30), }; var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon_ }); map.panTo(event.latLng); rotation += 10; } initialize();

 body, html { font-family: Arial; font-size: 20px; line-height: 40px; height: 100%; width: 100%; } #map-canvas { height: 90%; width: 100%; }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> Click on map to add markers... <div id="map-canvas"></div>