在Google Chrome上显示svg图像

Display an svg image on Google Chrome

本文关键字：svg 图像 显示 Google Chrome      更新时间：2023-09-26

我遇到了一个问题，当我想在谷歌浏览器上显示一个SVG图像与库D3.js。

代码如下:

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")，我的图片显示在谷歌浏览器。

…有人能给我解释一下发生了什么吗?因为这样显示图像很难看

根据w3schools，嵌入标签"在HTML4和XHTML中不支持(但在HTML5中允许)"。您应该使用object标记。以下代码片段适用于我的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");
相关文章：