feat: SVG 图标序列化为图片(第三版)

- 不修改 backgroundUrls(const)
- 节点创建后直接修改 node.backgroundImages
- XMLSerializer + btoa 序列化 SVG
This commit is contained in:
李进
2026-07-27 16:36:02 +08:00
parent 5a3fa6bf20
commit 7bb5b81fbd
+14 -1
View File
@@ -985,7 +985,7 @@
pushCaptureChild(children, afterNode); pushCaptureChild(children, afterNode);
const type = element.tagName === "IMG" || backgroundUrls.length ? "RECTANGLE" : "FRAME"; const type = element.tagName === "IMG" || backgroundUrls.length ? "RECTANGLE" : "FRAME";
return { const node = {
id: `node-${++nodeCounter}`, id: `node-${++nodeCounter}`,
type, type,
tag: element.tagName, tag: element.tagName,
@@ -1005,6 +1005,19 @@
backgroundImages: backgroundUrls, backgroundImages: backgroundUrls,
children children
}; };
// SVG 图标 → 序列化为 data URL 图片
if ((element.tagName === "SVG" || element.tagName === "svg") && !node.backgroundImages.length) {
try {
const svgClone = element.cloneNode(true);
if (!svgClone.getAttribute("xmlns")) svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
const svgStr = new XMLSerializer().serializeToString(svgClone);
node.backgroundImages = ["data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgStr)))];
node.type = "RECTANGLE";
} catch (e) {}
}
return node;
} }
function normalizeAssetUrl(url) { function normalizeAssetUrl(url) {