EasyLottie指南
如何更改动画 SVG 的颜色（Figma 导出）
如何在不失去运动的情况下对动画 SVG 重新着色、为什么 Figma 导出通常会抵制简单的颜色编辑，以及经过测试的真实重新着色前后。
为什么要重新着色 SVG，而不是从 Figma 重新导出
当动画 SVG 返回到错误的调色板时，重新打开 Figma、编辑每个图层并重新导出速度很慢，而且通常您不拥有源文件。如果动作正确并且只有颜色错误，则直接重新着色会更快、更安全。您保留精确的动画并仅更改填充和描边。
它提供了 Figma 运动导出、图标库和市场 SVG，它们以通用调色板形式提供，或者在您需要深色模式时专为浅色模式设计。它还会在交接中出现：开发人员收到 SVG，品牌团队在一周后更改颜色，没有人愿意为了一个十六进制值来回浏览设计文件。
动画 SVG 如何存储颜色和运动
来自设计工具的动画 SVG 通常有两个部分。该运动位于 CSS @keyframes 的样式元素中，通过类名称应用于形状。颜色位于形状本身，作为填充和描边属性或内联样式属性。因为两者是分开的，所以只要编辑器仅更改颜色标记，就可以在不接触动画的情况下替换颜色。
Figma 增加了复杂性。为了保留广色域颜色，其导出通常在同一样式属性中写入两次颜色：首先作为十六进制值，然后作为颜色(display-p3 r g b)。在 CSS 中，最后一个有效声明获胜，因此在支持 display-p3 的浏览器上，十六进制值将被忽略。仅编辑十六进制，屏幕上没有任何变化。这是人们认为 SVG 重新着色不起作用的最常见原因。
分步：在线重新着色动画 SVG
一切都在您的浏览器本地运行，因此 SVG 永远不会上传。
- 打开 SVG Color Changer 并放入 .svg 文件。
- 该工具会剥离 display-p3 覆盖，将命名颜色映射到十六进制，并列出它找到的每个填充和描边颜色。动画在预览中继续播放。
- 单击样本并选择一种新颜色。预览会立即更新。
- 对需要更改的每种颜色重复此操作，检查 SVG 所在背景的对比度。
- 下载重新着色的 SVG 并在浏览器中打开它以确认动画仍然运行。
发货前检查结果
直接在浏览器选项卡中打开下载的文件。该动议应与原议案相同。然后将其放置在真实的背景上：在白色上起作用的颜色可能会在深色表面上消失，并且细笔划首先会失去对比度。
如果 SVG 进入代码库，请将其与原始代码进行比较。干净的重新着色仅更改颜色值，并且对于 Figma 导出，删除 p3 覆盖。对样式块、类名或路径数据的任何更改都意味着发生了除重新着色之外的其他事情。
重新着色，或转换为 Lottie？
如果目的地需要 Lottie 而不是 SVG，则可以使用 Figma 到 Lottie 工具将动画 SVG 转换为真实矢量 Lottie。如果您希望将更改合并到两个文件中，请先重新着色。如果您希望稍后进行更多颜色更改，请先转换，因为 Lottie 颜色可以随时在 Lottie 换色器中再次交换。
Lottie 通常是应用程序更好的运行时格式，因为 iOS 和 Android 上的本机播放器支持它并提供播放控制。对于 CSS 动画就足够的网页来说，SVG 更简单。
快速清单
- 将.svg放入SVG换色器中；没有上传任何内容。
- 检查每个检测到的填充和描边颜色。
- 注意 Figma 导出中的 display-p3 覆盖。
- 一次性对所有相关样本重新着色，以避免合并您需要分开的颜色。
- 区分输出：只有颜色值应该改变。
- 如果您的应用程序需要，请随后转换为 Lottie。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
测试结果：重新着色Figma风格的动画SVG
我们的示例 SVG 模仿 Figma 动画导出：样式块中的 CSS @keyframes、形状上的动画类以及写入两次的三种主要颜色，一次作为十六进制，一次作为颜色（display-p3 ...）覆盖。我们将蓝色（#3B82F6）更改为#111827，将黄色（#F5C542）更改为#EC4899，下载结果，并将其与原始结果进行比较。
| 检查 | 原创 | 重新着色后 |
|---|---|---|
| @keyframes块 | 4 | 4，不变 |
| 动画声明和类 | 4 | 4，不变 |
| display-p3 颜色覆盖 | 3 | 0，已删除，因此适用十六进制值 |
| 不同的颜色 | 7 | 5，因为两种新颜色已经存在 |
| 文件大小 | 1,945 字节 | 1,825 字节 |
仅颜色值发生变化。样式块、关键帧、类和几何体未受影响，因此下载的文件的动画效果与以前完全相同。
display-p3 覆盖是许多 Figma 导出似乎忽略颜色编辑的原因。支持广色域颜色的浏览器使用后面的 p3 声明，并且永远不会显示您更改的十六进制值。删除覆盖会使可编辑的十六进制值成为渲染的值。
这两种新颜色已经在徽章的其他地方使用，因此七种不同的颜色变成了五种。如果您稍后想要单独更改合并的颜色，请从原始文件重新开始。
了解极限
- 填充和描边扫描无法检测到渐变、滤镜、CSS 变量或 JavaScript 中定义的颜色，需要在源中进行编辑。
- 删除 display-p3 覆盖意味着广色域显示器显示 sRGB 十六进制颜色。对于大多数品牌颜色来说，差异是看不见的；对于非常饱和的颜色，它会很明显。
- 使用 SMIL 或 JavaScript 制作动画的 SVG 保留其动画代码，但该代码在运行时设置的颜色不会更改。
- 合并的颜色无法在同一会话中再次分离。如果需要将它们分开，请从原来的颜色重新着色。
如果你的结果不同
- 1.如果您更改的颜色未在浏览器中更新，请在 SVG 中搜索颜色(display-p3。较晚的覆盖将获胜。
- 2.如果未列出可见颜色，请查找渐变停止点、CSS 变量或滤镜。这些需要手动编辑。
- 3.如果动画在其他工具中编辑后停止，请检查样式块和类属性是否保留。一些优化器删除看起来未使用的类。
- 4.如果您需要 Lottie 而不是 SVG，请在重新着色后进行转换，或者先转换并对 Lottie 重新着色。
常见问题
我可以在不破坏动画的情况下更改动画 SVG 的颜色吗？
是的。在我们的测试中，所有四个 @keyframes 块和动画类在重新着色后都没有变化；仅颜色值和 display-p3 覆盖发生变化。
为什么更改 Figma SVG 中的十六进制颜色没有任何作用？
Figma 经常以相同的风格在十六进制后面写入颜色（display-p3 …）值。支持 display-p3 的浏览器使用后面的值。删除覆盖，或使用具有此功能的工具，十六进制将适用。
我的 SVG 上传到任何地方了吗？
不会。检测、重新着色和下载在您的浏览器本地进行。
为什么重新着色后颜色数量减少了？
现在，两个样本具有相同的值，因此它们被列为一个。如果以后需要单独更改它们，请从原始文件重新着色。
我可以将重新着色的 SVG 变成 Lottie 吗？
是的。使用 Figma 到 Lottie 工具将动画 SVG 转换为矢量 Lottie。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。