Question

我试图最终将来自提供商Google的地图首先嵌入到SVG中作为foreignObject，使用脚本生成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>

并显示一个灰色矩形，其中包含字符串＆＃34; sdkjfh＆＃34;在其中

但如果我改变内心 var inner = "<img src="http://maps.googleapis.com/maps/api/staticmap?size=400x300"/>";

我只得到空的灰色矩形，并且检查DOM显示mapholder的innerHTML没有被设置为img但是如果我已经将它设置为某个东西则清除内容。

最后，如果我将div设置为静态包含img标记并完全放弃javascript，那么它会显示地图，但会阻止我像我需要的那样动态。

有人可以建议为什么在foreignObject中使用脚本来设置除简单字符串以外的任何东西时的行为差异？

在svg中将Google地图作为foreignObject嵌入

0 个答案: