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

Javascript

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') );