Javascript 将Google地图作为外来对象嵌入svg_Javascript_Svg

Javascript 将Google地图作为外来对象嵌入svg

javascript svg

Javascript 将Google地图作为外来对象嵌入svg,javascript,svg,Javascript,Svg,首先，我尝试将来自提供商Google的地图作为外来对象嵌入到SVG中，使用脚本生成innerHTML 这很有效 <?xml version="1.0" standalone="yes"?> <svg xmlns = "http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="150" fill="gray"/> <foreignObject x="10" y="10"

首先，我尝试将来自提供商Google的地图作为外来对象嵌入到SVG中，使用脚本生成innerHTML

这很有效

<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="150" fill="gray"/>
  <foreignObject x="10" y="10" width="100" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
  <div id="mapholder"></div>
  <script>
    var inner = "sdkjfh";
    document.getElementById("mapholder").innerHTML = inner;
  </script>
</body>
</foreignObject>
</svg>


var internal=“sdkjfh”；
document.getElementById（“mapholder”）.innerHTML=inner；

并显示一个带有字符串“sdkjfh”的灰色矩形

但如果我改变了内心世界

var-internal=”“
我只得到一个空的灰色矩形，检查DOM显示mapholder的innerHTML没有设置为img，但是如果我已经将它设置为某个值，它正在清除内容
最后，如果我将div设置为静态地包含img标记，并完全放弃javascript，那么它会显示映射，但会阻止我像需要的那样保持动态
有人能提出为什么在foreignObject中使用脚本来设置除简单字符串以外的任何内容时行为会有所不同吗？
您如何显示SVG本身？现在我只是将其加载到ChromeAs文件中？我认为Chrome的安全策略不允许文件发出http请求。您可能需要通过web服务器加载它才能使其正常工作。不，我检查过了，如果我将其作为文件进行加载，或者将其托管在web服务器上并从那里加载，也没有什么区别。即使我将inner改为inserttext
它也不会显示任何内容。