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");