如何使用SVG + XML數據設置IMG src？

Question

我有一個函數可以返回由jSignature先前生成並保存到文件中的SVG文件。 我的腳本通過ajax調用獲取實際文件內容，以及有關簽名的其他數據，並在一個大型JSON對象中獲取。

這是一個離線項目，因此我試圖將SVG數據存儲在本地存儲中，以便在離線時進行渲染。 這就是為什么我不能簡單地引用服務器上的SVG文件的原因。

我想將SVG圖像數據分配給IMG元素，以便用戶可以在瀏覽器中看到它。 如何直接將此SVG數據設置為IMG標簽，而無需先將其寫入文件？

如果我嘗試設置'src'屬性，則圖像顯示無效的圖像圖標。 我還在實際SVG數據之前添加了“ data：image / svg + xml”文本，但沒有更改。

這是一個例子：

// This would be read from localStorage:
var image_data = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1000\" height=\"151\"><path />...snipped...</svg>';

// Show the SVG image:
$("#image1").attr('src', 'data:image/svg+xml,' + image_data);

但是，這不起作用。 我究竟做錯了什么？

Answer 1

我相當確定，如果svg編碼為base64，則只能將svg嵌入src中。

最好使用<svg id="image1"></svg>元素，並使用jQuery .replaceWith(..)替換掉它，不是嗎？ （您不需要xml / doctype gunk）。

示例： JFiddle

的HTML

<svg id="image1"></svg>

Java腳本

var imageData = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
$('#image1').replaceWith( $('<div/>').append(imageData).find('svg:first').attr('id','image1') );