Javascript 在svg标记中嵌入img不显示

我将图像嵌入svg标记中并设置为标记url，不显示它的图像显示为已损坏，即使图像有效。如何显示图像？在下面的小提琴中，我试图显示svg标记。svg标记不显示已嵌入svg标记中的图像

 <div id="map_canvas"></div>
var geocoder;
var map;

function initialize() {
 var map = new google.maps.Map(
 document.getElementById("map_canvas"), {
  center: new google.maps.LatLng(37.4419, -122.1419),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var time = "00:15:30";
var testIcon = {
  anchor: new google.maps.Point(10, 10),
  url: 'data:image/svg+xml;utf-8,<svg width="100" height="100" 
  class="crop-shapes"  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="28" y1="40" 
  x2="32" y2="60" style="stroke:#666; stroke-width:1"/><line x1="32" 
  y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/><circle 
  cx="45" cy="30" r="20" fill="#2ECC71" style="stroke:#000; stroke-
  width:1"/><text id="timer_text" class="timer" x="30" y="32" 
  fill="#000000" font-size="9" font-weight="bold">00:10:30</text>
  <circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" 
  style="stroke:#000; stroke-width:1"/><image 
   xlink:href="https://www.gstatic.com/webp/gallery3/1.png" x="0" 
   y="45" height="50px" width="50px"/></svg>'

   }
   marker = new google.maps.Marker({
   position: map.getCenter(),
   map: map,
   icon: testIcon,
   title: 'Hello World!'
   });

   }
   google.maps.event.addDomListener(window, "load", initialize);

你有两个问题

字符无效，因此即使是标记URL的非图像部分也无效。任何字符都应替换为%23 图像不能有外部引用，因此您需要进行外部引用，以便使图像成为

<image xlink:href="data:image/png;base64,iVBOR...etc" />

请阅读如何创建并通过编辑将缺少的信息添加到您的帖子中：如果您还没有阅读，我建议您这样做：我强烈建议您遵循我链接的两个指南，因为上面的人更可能在帖子遵循这些指南时回答问题。我特别缺少的是——到目前为止你都做了些什么？您面临哪些错误/问题？您是否有代码片段显示您迄今为止尝试的内容？请把你的代码直接嵌入你的答案中。欢迎来到StackOverflow