在谷歌Chrome瀏覽器上顯示svg圖像

我想在谷歌瀏覽器上顯示庫D3.js的SVG圖像時遇到問題。在谷歌Chrome瀏覽器上顯示svg圖像

下面是代碼：

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

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

此代碼在Firefox，而不是在谷歌瀏覽器（同樣的問題，如果我使用對象而不是嵌入的）。

但是，如果我將此樣式添加到我的SVG圖片：attr("style", "display:block")，我的照片將顯示在Google Chrome上。

...有人能解釋我會發生什麼嗎？因爲這樣顯示我的圖像是非常難看的。

來源

2013-04-18 user1528760

[本博客文章（http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers）可能的幫助。 –

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

來源

2013-04-19 19:51:05 Rafael

謝謝，但我的文檔類型是在HTML5中...無論如何這是一個奇怪的行爲。 – user1528760

在谷歌Chrome瀏覽器上顯示svg圖像

回答

相關問題