离线场景下如何使用SVG+XML数据设置IMG元素的src属性？

没问题，我帮你搞定这个离线展示签名的需求！因为你没法直接引用服务器上的SVG文件，把SVG转成Data URL是最适合的方案——它能把SVG的内容直接嵌入到img的src属性里，完全不需要依赖服务器，完美适配离线场景。

下面是具体的实现步骤和代码：

步骤1：处理AJAX获取到的SVG内容 #

当你通过AJAX拿到SVG的文本内容（或者从localStorage读取出来）后，需要先对它进行Base64编码，这样才能转换成浏览器能识别的Data URL格式。

步骤2：生成Data URL并赋值给img元素 #

直接用这段代码就能搞定：

// 假设你已经获取到SVG内容，存在svgContent变量里
const svgContent = "<svg ...></svg>"; // 这里替换成你实际拿到的SVG文本

// 对SVG内容编码，避免特殊字符导致显示异常
const encodedSvg = btoa(unescape(encodeURIComponent(svgContent)));
// 拼接成符合标准的Data URL
const svgDataUrl = `data:image/svg+xml;base64,${encodedSvg}`;

// 把Data URL赋值给目标img元素
const signatureImg = document.getElementById("your-signature-img-id");
signatureImg.src = svgDataUrl;

一些实用注意事项 #

• 如果你的SVG里包含<!DOCTYPE svg>声明，偶尔会导致显示异常，要是遇到这种情况，只保留<svg>标签开始的内容即可。
• 存储到localStorage的时候，直接存SVG的原始文本就好，用的时候再转成Data URL就行，这样能节省编码步骤的重复执行。
• 这种方式完全基于浏览器本地处理，不需要任何外部资源，完美适配你的离线项目需求。

内容的提问来源于stack exchange，提问作者Ryan Griggs