react-native-svg径向渐变中心透明色不生效、残留灰色调如何解决？

算力阿峰

2026-10-7

问题原因

你遇到的色偏问题本质是react-native-svg在渲染多stop渐变时，不同stopColor的插值计算逻辑和web端SVG标准有差异，同时你设置的中心stop为#00000000（黑色全透）、边缘stop为深灰色半透，两个颜色的基础色相不一致，渐变过渡过程中会生成灰色中间值，叠加后就出现了中心浅灰色偏的效果；另外部分Android设备对8位带透明通道的十六进制颜色解析异常，也会导致stopOpacity不生效。

修复方案

统一渐变的stopColor色相，所有stop使用同一个基础颜色，仅通过stopOpacity控制透明度，避免不同颜色插值产生杂色
不要同时使用带alpha通道的颜色值和stopOpacity属性，二者选其一即可，避免透明度叠加计算异常
旧版本react-native-svg对userSpaceOnUse单位的渐变坐标计算存在已知bug，若修改色值后仍有问题，可切换为默认的objectBoundingBox单位，将渐变参数调整为0-1的比例值

修复后代码示例

<Svg
  height="700"
  width="1000"
  style={{ position: "absolute", left: -400, top: -350 }}
>
  <Defs>
    <RadialGradient
      id="cardCircleGradient"
      cx="600"
      cy="600"
      rx="600"
      ry="600"
      fx="600"
      fy="600"
      gradientUnits="userSpaceOnUse"
    >
      <Stop offset="0" stopColor="#0E0E0E" stopOpacity="0" />
      <Stop
        offset="1"
        stopColor="#0E0E0E"
        stopOpacity="0.45"
      />
    </RadialGradient>
  </Defs>
  <Circle cx="600" cy="600" r="600" fill="url(#cardCircleGradient)" />
</Svg>

排查验证步骤