如何将AI文件分层导入代码，通过CSS仅修改插画主色无需重绘

1. Illustrator文件预处理与导出 #

• 打开原分层AI文件，将所有填充元素的彩色值替换为对应亮度的纯灰色：保留原设计的明暗对比度，比如原最深的橙色区域替换为深灰#1a1a1a，中间调区域替换为中灰#808080，高光区域替换为浅灰#e6e6e6，全程不需要调整图层结构和分层关系。
• 导出格式选择SVG，导出配置勾选「保留图层编辑功能」「使用内联样式」，取消勾选「压缩路径」「合并相同图层」「转换为位图」，得到可直接嵌入HTML的SVG代码。

2. CSS绑定动态主色实现一键换色 #

将导出的SVG代码直接嵌入HTML文件中，给所有填充路径添加统一类名illu-path，之后只需通过CSS变量控制主色即可：

:root {
  /* 仅需修改该变量即可切换整幅插画的主色 */
  --illustration-primary: #ff7f24;
}

.illu-path {
  /* 提取路径原灰度的亮度值，和主色混合生成对应亮度的同色系颜色 */
  fill: color-mix(in hsl, var(--illustration-primary), white calc((100 - lch(lightness of currentColor)) * 1%));
}

兼容低版本浏览器替代方案：如果运行环境不支持color-mix属性，可以使用滤镜实现近似效果：

.illu-path {
  fill: var(--illustration-primary);
  filter: brightness(calc(lch(lightness of currentColor) / 50));
}

3. 效果验证 #

修改--illustration-primary的变量值为任意色值，整幅插画会自动匹配原设计的明暗对比度生成对应主色的效果，不需要调整AI文件或者SVG代码，原分层的阴影、高光、轮廓层次完全保留。

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