將引用SVG圖像嵌入HTML文件

我有一個項目，我想將簡單的圖形背景放入表格單元格中。背景圖像和一個小的svg文件很好用！將引用SVG圖像嵌入HTML文件

但我真的想保持源文件在一個文件中。也就是說，我希望能夠在HEAD中定義圖像，並在內聯STYLE css中引用它。

我已經嘗試過各種ID屬性的CSS和哈希引用在css url（）函數中的組合，但沒有成功。這似乎是一件好事，但環顧四周，我還沒有看到一絲想法。這告訴我要麼不能完成，要麼以其他方式完成...

建議？

您可以將您的svg文件保存到別處，並將其放入iframe中。

<iframe src="index.svg" width="100%" height="100%" />

有可能是太..

SVG的最佳TUTS發現MDN其他方法。

2012-05-08 20:02:50 Katti

事實上，在提出問題並思考它之後，我意識到我已經閱讀了答案。您需要使用數據網址創建一個內嵌svg圖形。這可以給你的一個CSS類的背景圖像屬性，如這樣的：

{背景圖像：網址（「數據：圖像/ SVG + xml的; UTF8，\ ... \ 」） ;}

編碼utf8將允許您直接鍵入代碼，用反斜槓轉義新行並避免雙引號（據我所知;-)。現在你只需設置TD的CLASS，它的效果非常好！

現在我需要做的是找出如何使在底部而非頂部的背景...

2012-05-21 21:51:16 user1382795

嗯，應該有行在示例代碼中的反斜槓之後中斷... – user1382795

是的，我忽略將其格式化爲代碼並且換行符崩潰。 – user1382795

我已經使用了這種技術很多。請注意，嚴格來說，該字符串應該是URL編碼的。我相信IE9堅持這一點，這使得它很難讀。 Firefox和Safari似乎只反對＃（或％23編碼），我認爲他們可能已經過去了...... – user1382795

此代碼也可能工作：

<svg> 
    <use xlink:href="..." /> 
</svg>

2012-11-23 09:35:16

回答