SVG 导出颜色规范

平台按颜色识别加工意图：切割用 #FE0002 描边，雕刻用 #2366FF 描边，填充雕刻用 #2366FF 填充。 其余颜色照常导出，只是加工类型要由用户自己指派。

你画的颜色平台只读不改：颜色只用来识别，写进文件的只有加工类型 data-processing-type。

两种颜色，五个分组

分组	怎么画
Red line 切割线	`stroke=` `#FE0002`
Blue line 雕刻线	`stroke=` `#2366FF`
Fill vector 填充矢量	`fill=` `#2366FF`
Bitmap 位图	`<image>` 元素，与颜色无关
Other vector 其他矢量	其余可见矢量，按各自的颜色分成多行

同一分组里有多少个元素都只占一行，用户配置一次。用户在下拉里选「Open in Studio」后看到的就是这个弹窗（选「下载」不弹窗，直接落盘）。

导出设置

机型P3 加工模式平面加工

材料 Plywood / Basswood Plywood 3mm

加工类型8 个元素

切割线#FE0002 · 1 个元素切割
雕刻线#2366FF · 1 个元素线条雕刻
填充矢量#2366FF · 1 个元素填充雕刻
位图2 个元素填充雕刻该机型支持填充雕刻，位图已锁定
其他矢量#22c55e · 2 个元素请选择加工类型
其他矢量#a855f7 · 1 个元素请选择加工类型

共 6 个分组取消在 Studio 打开

机型、加工模式和材料在最上面，它们决定这台机器支持哪些加工类型。每行右侧的下拉就是这一组的加工类型。

一个完整的例子

你的 export 钩子返回这样一份 SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <rect x="4" y="4" width="192" height="92" fill="none" stroke="#FE0002"/>
  <path d="M20 30h160" fill="none" stroke="#2366FF"/>
  <circle cx="100" cy="65" r="20" fill="#2366FF"/>
</svg>

只用到前三组，所以弹窗里是三行——切割线、雕刻线、填充矢量各一个元素。用户各选一次加工类型，确认后你的文件变成：

<rect   … stroke="#FE0002" data-processing-type="VECTOR_CUTTING"/>
<path   … stroke="#2366FF" data-processing-type="VECTOR_ENGRAVING"/>
<circle … fill="#2366FF"   data-processing-type="FILL_VECTOR_ENGRAVING"/>

属性逐个写在真正要加工的元素上，不挂在 <g> 上靠继承。文件里只有加工类型，不含功率、速度这类参数——用户在弹窗里选的材料，由 Studio 应用对应的推荐参数。

到这里就能跑通了。下面三节是细则，导出结果和预期对不上时再查。

颜色没被识别

先确认写法在支持范围内。每个元素按 inline style → <style> 规则 → 元素属性 的顺序取值，三处都没有才向上继承。这个顺序对齐 SVG 2：presentation attribute 的特异性为 0，任何 CSS 规则都压过它。

下面每一种都会被识别为切割线：

<path stroke="#FE0002" fill="none"/>
<path stroke="#fe0002" fill="none"/>
<path style="stroke:#FE0002" fill="none"/>
<g stroke="rgb(254, 0, 2)" fill="none"><path/></g>

<style>.st0{fill:none;stroke:#FE0002}</style>
<path class="st0"/>

<defs><style><![CDATA[.str0{stroke:#FE0002;fill:none}]]></style></defs>
<path class="str0"/>

<style> 放在文档任意位置都行——<defs> 里、甚至写在它修饰的元素之后。支持 CDATA 包裹，支持类 / id / 元素名 / 属性 / 后代选择器与逗号分组，按特异性和文档顺序排优先级。唯一的例外是 !important 不参与排序，内联写法始终优先。

颜色只认这几种写法：#RGB、#RGBA、#RRGGBB、#RRGGBBAA，以及数值形式的 rgb() / rgba()。透明度不参与比对，#FE0002FF、#FE000280、rgba(254,0,2,.5) 都按 #FE0002 归组，半透明的红仍然是切割线。

读不到颜色的四种情况：

外部样式表（<link> / @import）
@media 等条件规则里的声明
CSS 变量与 currentColor
不认识的写法：具名色、hsl()、带百分号的 rgb()

这些元素不会丢，只是落进「其他矢量」，由用户自己指派加工类型。

分组和画的不一样

「其他矢量」按颜色分行。 不符合规范的颜色不会并成一坨，每种颜色各占一行——上面弹窗末尾的绿、紫两行就是这么来的：

归组取色描边优先于填充
同色不同写法（#22C55E / rgb(34,197,94)）算同一行
跨多个 SVG 文件的同色合并计数
每行的加工类型默认为空，平台不替你猜
排序：规范色四组在前，其他矢量按元素数从多到少

同时是蓝底和红边的形状会被拆成两个。 fill="#2366FF" 加 stroke="#FE0002" 表达的是两道工序——填充雕刻内部、切割轮廓，但协议规定一个元素只能带一个加工类型：

<!-- 你导出的 -->
<rect fill="#2366FF" stroke="#FE0002"/>

<!-- 平台处理后 -->
<rect fill="#2366FF" stroke="none" data-processing-type="FILL_VECTOR_ENGRAVING"/>
<rect fill="none"    stroke="#FE0002" data-processing-type="VECTOR_CUTTING"/>

填充那份插在描边那份前面，保持原本「先填充后描边」的绘制顺序，观感不变。副本不带 id，marker-* 只留在描边那份。这个形状会同时出现在两组里，所以各组元素数之和会比你画的多。

只有两边都是规范色才拆。红边配绿底不拆——绿色不表达加工意图，整个形状按描边归成切割线。

图形整个没出现

参与分组的元素：path rect circle ellipse line polyline polygon text，以及位图 image。

不参与的：

<defs> <clipPath> <mask> <marker> <pattern> <symbol> 里的图形——它们只是定义，不会被画出来
display:none 或 visibility:hidden 的元素，属性、inline style、<style> 里的类三种写法都算
fill 与 stroke 都是 none 的元素

<use> 是最容易踩的一个。 它画出来的那份图形不会出现在任何分组里，也就拿不到加工类型：<use> 本身不是矢量图形，被引用的原件躺在 <defs> / <symbol> 里也不算数。整张图都靠 <use> 拼的话，弹窗里一行都不会有。

更隐蔽的是原件本身也画在图上的情形。<path id="p" …/> 加 <use href="#p" x="20"/>，原件正常成组、拿到加工类型，<use> 复制出的那份不带——同一张图「一份被切、一份不被加工」。请直接输出实际图形。

多文件导出时同名分组跨文件合并计数，解析不了的 SVG 只跳过它自己。选「Open in Studio」时，独立的位图文件（PNG / JPEG / WebP / GIF / BMP）会被包成 SVG <image>，因此也会出现在「位图」分组里；其余文件原样保留。选「下载」则一律原样交付，不做包装、不写属性。一个分组都产不出时——SVG 里全是上面这些不参与的元素——弹窗不显示「加工类型」那一段。