如何用react-native-svg实现带模糊效果的空心圆形图片遮罩？

我尝试用react-native-svg实现如下效果：背景是动态图，添加空心圆形遮罩，且遮罩区域外的背景图要做模糊处理。目前只能实现普通的模糊镂空，做不出目标的空心圆形样式，求技术建议。

当前代码示例：

<ImageBackground
  resizeMode="cover"
  source={{ uri: route.params?.image }}
  style={{ flex: 1}}
  blurRadius={0}
>
  <View
    style={{
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <Svg width={300} height={300}>
      <Circle cx={150} cy={150} r={120} fill="transparent" />
      <Circle
        cx={150}
        cy={150}
        r={120}
        strokeWidth={60}
        stroke={hexToRgba("#000", "0.4")}
        fill="transparent"
      />
    </Svg>
  </View>
</ImageBackground>

当前效果：

预期效果：

解决方案 #

核心思路是通过SVG的<Mask>遮罩结合双层背景图实现：底层放模糊后的背景，上层放清晰背景并通过遮罩控制显示区域，同时叠加半透明遮罩层。以下是完整实现代码：

import React from 'react';
import { ImageBackground, View } from 'react-native';
import Svg, { Circle, Defs, Mask, Rect } from 'react-native-svg';

// 颜色转换函数（如果已有可直接复用）
const hexToRgba = (hex, alpha) => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

const HollowBlurMask = ({ route }) => {
  return (
    <View style={{ flex: 1 }}>
      {/* 1. 底层：模糊后的背景图，占满整个屏幕 */}
      <ImageBackground
        resizeMode="cover"
        source={{ uri: route.params?.image }}
        style={{ 
          flex: 1, 
          position: 'absolute', 
          width: '100%', 
          height: '100%' 
        }}
        blurRadius={10} // 可根据需求调整模糊程度
      />

      {/* 2. 上层：清晰背景 + SVG遮罩 */}
      <ImageBackground
        resizeMode="cover"
        source={{ uri: route.params?.image }}
        style={{ flex: 1 }}
      >
        <Svg style={{ position: 'absolute', width: '100%', height: '100%' }}>
          <Defs>
            {/* 定义空心圆形遮罩：白色区域显示上层内容，黑色区域透出底层模糊背景 */}
            <Mask id="hollowCircle">
              {/* 填充整个画布为白色，作为遮罩基础 */}
              <Rect x="0" y="0" width="100%" height="100%" fill="white" />
              {/* 中间圆形设为黑色，实现镂空效果 */}
              <Circle cx="50%" cy="50%" r="120" fill="black" />
            </Mask>
          </Defs>

          {/* 半透明遮罩层：应用遮罩后，仅外部区域显示半透明黑色 */}
          <Rect
            x="0"
            y="0"
            width="100%"
            height="100%"
            fill={hexToRgba("#000", "0.6")}
            mask="url(#hollowCircle)"
          />
        </Svg>
      </ImageBackground>
    </View>
  );
};

export default HollowBlurMask;

关键逻辑说明： #

• 双层背景图：底层背景添加blurRadius实现模糊，上层保持清晰，通过遮罩让中间区域显示清晰背景，外部透出底层模糊效果
• SVG遮罩原理：<Mask>中白色区域会保留上层内容，黑色区域会隐藏上层内容（透出下层），因此先填充全屏白色，再画黑色圆形，刚好实现中间镂空的效果
• 半透明遮罩层：叠加在清晰背景上，应用遮罩后只有外部区域显示半透明黑色，强化空心圆形的视觉边界

如果是动态图（比如GIF或视频帧），只要source的uri指向正确的动态资源即可，ImageBackground会自动处理动态内容的渲染。

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