javascript - 在 Google Chrome 上显示 svg 图像

Question

当我想在 Google Chrome 上使用库 D3.js 显示 SVG 图像时遇到问题。

下面是代码：

var svg = d3.select("body").append("embed");

svg.attr("src","img/drawing.svg").attr("type","image/svg+xml");

此代码适用于 Firefox，但不适用于 Google Chrome（如果我使用对象而不是嵌入，则会出现同样的问题）。

但是，如果我将此样式添加到我的 SVG 图片 :attr("style", "display:block")中，我的图片会显示在 Google Chrome 上。

...有人可以解释一下会发生什么吗？因为这样显示我的图像非常难看。

Answer 1

根据w3schools的说法，嵌入标签“在 HTML4 和 XHTML 中已弃用（但在 HTML5 中允许） ”。您应该使用对象标签。以下代码段适用于我的 Chrome：

var svg = d3.select("body").append("object");

svg.attr("data", "http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg")
   .attr("type","image/svg+xml");