技能介绍

解决什么问题

把生成的 SVG 导入千星奇域图片编辑器时，很容易得到「浏览器里看着对、编辑器里全变样」的结果：旋转丢失、形状被裁掉、fill 失效后忽然变成紫色，或者 polygon 因为点数不是 3 而整体消失。该技能把 backend/app/main.py 中 parse_svg_scene 实际支持的子集固化成一份写作契约，让你在动笔前就避开这些静默失败，做到「导入即所得」。

核心能力与工作方式

技能会先确认两个约束：图元数量上限和画布尺寸；满画布背景 <rect> 也要计入上限。随后在 SVG 与 CSS 之间做一次格式选择：构图天然轴对齐时走 SVG；需要倾斜形状、旋转柔光椭圆或对角线动势时，建议改用 miliastra-image-css-builder，因为 SVG 导入会丢弃所有 transform，全部图元落成 rotation=0。

规划阶段按 5 步推进：

提取 3–6 个主色，并准备 1–2 个提亮/压暗变体，全篇复用。
将图片区域映射到轴对齐图元。
自下而上排图层：背景 → 大色块 → 中等特征 → 点缀；文档顺序就是 z 顺序。
分配预算：背景 1 个、大色块约 50%、中等特征约 35%、点缀约 15%，并预留 1–2 个余量。
写码后按检查清单自检；服务可达时执行自校验，对比 fit.png 与目标图。

可导入的标签只有 <rect>、<ellipse> 和恰好 3 个点的 <polygon>。属性必须逐个书写，fill 不从父级继承，opacity 只能写在每个形状上；渐变、滤镜、stroke、clip-path 等会被丢弃或忽略。三角形导入时只取包围盒，因此始终按目标中心与尺寸写成 apex-up 等腰 三角形，顶点为 (cx, cy − h/2)、(cx − w/2, cy + h/2)、(cx + w/2, cy + h/2)。

适用边界与注意点

根元素必须是 viewBox="0 0 W H"；min-x/min-y 偏移会被忽略，画布也不会自动扩展，所有图元都要完整落在 [0,0]→[W,H] 内。第一个子元素必须是满画布背景 <rect>。坐标只写普通十进制数，1e2 会被读成 1，百分比会按原始数字处理。

柔边只能靠 opacity 在 0.4–0.9 之间的半透明叠色来近似，调色板要先为交叠处的中间色做好准备。四角星、五角星这类多于 3 个点的 <polygon> 无法导入，只能在轴对齐约束下用层叠矩形兜底；若需要可辨识的星形或旋转图元，应改用 JSON 导入，或回到 CSS builder。