React Native Web SVG组件在旧版iOS Safari无法渲染（渐变失效）

针对你遇到的旧版iOS Safari（12、13、15）中SVG渐变透明的问题，以下是几个经过验证的解决方向：

• 给渐变/裁剪路径ID添加全局唯一标识
  旧版Safari对SVG元素ID的作用域处理存在缺陷，如果你的SVG组件被多次复用，重复的ID会导致浏览器无法正确匹配渐变定义。可以通过组件的唯一key、props中的标识或者生成随机字符串来确保ID唯一：

  // 示例：用组件props中的uniqueKey生成唯一ID
  const { uniqueKey, width } = props;
  
  <Defs>
    <LinearGradient
      id={`b-${uniqueKey}`}
      x1={0}
      x2={0}
      y1={0}
      y2={1}
      gradientUnits="objectBoundingBox"
    >
      <Stop offset={0} stopColor="#003595" />
      <Stop offset={1} stopColor="#1A5AD7" />
    </LinearGradient>
    <ClipPath id={`a-${uniqueKey}`}>
      <Path fill="#fff" d={`M0 0h${width}v342H0z`} />
    </ClipPath>
  </Defs>
  
  <G clipPath={`url(#a-${uniqueKey})`}>
    <Path fill={`url(#b-${uniqueKey})`} d={`M0 0h${width}v342H0z`} />
  </G>
  

• 显式指定Stop元素的offset属性
  虽然SVG标准中第一个Stop的offset默认是0，但旧版Safari可能需要明确声明该属性才能正确识别渐变节点。给第一个Stop加上offset={0}，避免浏览器解析异常。

• 替换gradientUnits为objectBoundingBox
  你当前使用的userSpaceOnUse是基于SVG全局坐标系计算渐变，旧版Safari对这种方式的坐标计算容易出现偏差。换成objectBoundingBox后，渐变坐标基于引用元素的边界框（取值0-1对应元素的百分比），兼容性更好。

• 确保Defs放在SVG根元素的最顶部
  旧版Safari对SVG元素的加载顺序敏感，将<Defs>放在SVG的最开头，确保渐变和裁剪路径的定义在被引用前就被浏览器解析完成。

• 检查React Native Web SVG依赖版本
  如果使用的是react-native-svg或相关转换库（如@svgr/webpack），尝试升级到兼容旧版Safari的最新稳定版本，部分旧版本库存在渐变解析的兼容性bug。

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