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

时间:2018-05-01 22:17:48

标签: javascript jquery html svg

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

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

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

如果我尝试设置' src'属性,图像显示无效的图像图标。我还添加了"数据:image / svg + xml,"实际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);

然而,这不起作用。我做错了什么?

1 个答案:

答案 0 :(得分:0)

我相当确定你只能在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') );