Question

我有一个函数返回之前由jSignature生成并保存到文件中的SVG文件。我的脚本通过ajax调用获取实际文件内容，以及大型JSON对象中有关签名的其他数据。

这是一个离线项目，因此我尝试将SVG数据存储在localstorage中以便在离线时进行渲染。这就是为什么我不能简单地引用服务器上的SVG文件。

我想将SVG图像数据分配给IMG元素，以便用户可以在浏览器中看到它。如何将此SVG数据直接设置为IMG标记，而无需先将其写入文件？

如果我尝试设置＆＃39; src＆＃39;属性，图像显示无效的图像图标。我还添加了＆＃34;数据：image / svg + xml，＆＃34;实际SVG数据之前的文本但没有变化。

以下是一个例子：

// 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中嵌入svg，如果svg被编码为base64。

你可能会更好地使用<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') );

如何使用SVG + XML数据设置IMG src？

1 个答案: