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

Posted 2021-03-29

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

这是一个离线项目，所以我试图将SVG数据存储在localstorage中以便在离线时进行渲染。这就是为什么我不能简单地引用服务器上的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);

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

答案

我很相信你只能在src中嵌入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') );