Illustrator導出的.svg文件不會呈現在HTML中

我不確定這是否是巧合，但似乎如果我從Illustrator中導出svg文件，甚至嘗試使用我在Web上找到的導出的svg文件來自Illustrator，他們不渲染。Illustrator導出的.svg文件不會呈現在HTML中

我正在使用下面的代碼，也許有人深入瞭解svg和HTML可以告訴我什麼可能是我的svg文件錯？

<!DOCTYPE html> 
<html lang="en"> 
    <style> 
    html { 
     background-image: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg); 
     background-size: contain; 
     height: 100%; 
    } 
    </style> 
    <head>......</head> 
</html>

我曾嘗試上面的代碼，取而代之的鏈接到不同的SVG文件和它的作品，所以我的猜測是，什麼是錯與特別是我SVG文件？

來源

2013-05-13 mvcNewbie

爲什麼你將CSS應用到'html'元素而不是'body'？ – Oded 2013-05-13 18:12:58

我想要整個頁面的背景，而不僅僅是身體。無論如何，上面的標記與不同的svg文件一起工作，所以看起來這個文件有問題，我想嘗試推斷那是什麼，但沒有絲毫的想法從哪裏開始。 – mvcNewbie 2013-05-13 18:49:53

嗯。如果它不在'body'中，它將不會呈現。只有'body'元素中的東西出現。 – Oded 2013-05-13 18:55:52

它按預期工作。見http://jsfiddle.net/PA8zn/show這裏，我已經包含在HTML元素的SVG：

html { 
    background: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg) no-repeat;

}

的SVG是一個非常沉重的文件，因此它需要相當一段時間才能顯示出來。您可以嘗試清理它以提高性能。無論是通過手工還是像Scour這樣的工具：http://codedread.com/scour/

來源

2013-05-13 19:54:56

同上你的結果，在IE10/win7上顯示得很好 - 雖然緩慢加載。 – markE 2013-05-13 20:02:59

非常感謝jsfiddle dstorey，我一整天都在搞亂它，你的簡單例子有所幫助，也許這可能是我如何提供內容的一部分。 – mvcNewbie 2013-05-13 20:22:55

Illustrator導出的.svg文件不會呈現在HTML中

回答

相關問題