Figma导出的SVG为什么颜色和原图不一样？

这个问题其实跟Figma的导出逻辑有关，尤其是涉及到渐变填充和图层结构的时候。Figma在处理复杂图形时，会根据它的渲染引擎决定如何输出SVG代码，而很多时候它并不会完全按照你预期的方式生成。

首先说一下为什么fill变成了none，而颜色跑到了stroke上。这种情况通常是由于Figma在导出时对图层的解析方式有问题。如果你的图层是通过布尔运算（比如合并、减去等）或者有剪切蒙版，Figma可能会把原本的填充属性丢掉，转而用描边来模拟效果。这种行为特别容易出现在复杂的矢量图形中。

解决这个问题可以从以下几个方面入手：

第一，检查你的图层编组和布尔运算。如果用了布尔运算，试着把布尔运算的结果“轮廓化”一下。具体操作是选中图层后右键选择“Outline Stroke”，这样可以把路径固定下来，避免导出时被重新解析。

第二，渐变填充的问题。Figma有时不会正确导出渐变的fill属性，而是直接用纯色代替。你可以手动调整导出的SVG代码，把fill="none"改成对应的渐变定义。举个例子：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#FFC3A0;stop-opacity:1" />

    </linearGradient>

  </defs>

  <path fill="url(#grad1)" d="M12..." />

</svg>

在这个例子中，我手动添加了一个定义，并且把fill指向了这个渐变。你可以根据实际需要调整渐变的颜色和方向。

第三，如果你发现某些简单形状没问题，但复杂图标有问题，那大概率是因为复杂图标的图层嵌套太深，或者使用了不必要的透明度、混合模式之类的设置。试着把复杂图标拆解成更简单的部分，分别导出后再合并。

最后提醒一点，Figma的SVG导出功能确实有些坑，尤其是处理渐变和布尔运算的时候。如果实在搞不定，可以试试其他工具，比如Adobe Illustrator，它的SVG导出相对来说更稳定一些。当然，这也不是万能的，毕竟每个工具都有自己的局限性。

总之，先从图层结构和布尔运算入手，再手动调整SVG代码，基本就能解决大部分问题了。希望这些建议能帮到你。

问题在于Figma导出SVG时，渐变填充被错误地转换成了描边显示，通常是因为图层的布尔运算或混合模式导致的。解决方法是：选中图层后右键选择“Flatten”来合并效果，然后再导出。

如果Flatten无效，可以手动调整SVG代码，把丢失的渐变定义补回去。比如这样：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" stop-color="#FF6B6B"/>

      <stop offset="100%" stop-color="#4ECDC4"/>

    </linearGradient>

  </defs>

  <path fill="url(#grad1)" d="M12..."/>

</svg>

复杂图标建议检查是否有嵌套的布尔运算组，有的话先合并形状再导出。实在不行就用Figma插件“SVG Export Fixer”一键修复，省事。