如何使用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') );