React Native中SVG图片模糊实现及模糊角显示异常求解

1. 实现SVG图片的模糊效果 #

• 先安装依赖库react-native-svg：

  npm install react-native-svg
  # 或 yarn add react-native-svg
  

• 利用SVG的滤镜系统，通过<Filter>和<FeGaussianBlur>实现模糊，示例代码：

  import Svg, { Image, Filter, FeGaussianBlur } from 'react-native-svg';
  
  const BlurredSvg = () => {
    return (
      <Svg width="200" height="200">
        <Filter id="svgBlur">
          {/* stdDeviation控制模糊程度，数值越大模糊效果越强 */}
          <FeGaussianBlur in="SourceGraphic" stdDeviation={5} />
        </Filter>
        <Image
          href={require('./your-svg-file.svg')}
          width="200"
          height="200"
          filter="url(#svgBlur)"
        />
      </Svg>
    );
  };
  
  export default BlurredSvg;
  

2. 解决模糊角变为圆形的异常 #

这种问题是因为模糊滤镜的扩散范围超出了圆角区域，导致原本的模糊角被过度扩散成圆形，可尝试以下几种解决办法：

方案一：用裁剪路径限制模糊范围 #

定义与背景圆角一致的裁剪路径，让模糊只作用在路径范围内，避免扩散溢出：

import Svg, { Defs, LinearGradient, Stop, Rect, Filter, FeGaussianBlur, ClipPath, Use } from 'react-native-svg';

const GradientBlurBackground = () => {
  return (
    <Svg width="100%" height="100%">
      <Defs>
        {/* 渐变背景定义 */}
        <LinearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <Stop offset="0%" stopColor="#4c669f" />
          <Stop offset="100%" stopColor="#3b5998" />
        </LinearGradient>
        {/* 模糊滤镜 */}
        <Filter id="cornerBlur">
          <FeGaussianBlur in="SourceGraphic" stdDeviation={8} />
        </Filter>
        {/* 裁剪路径，和背景圆角匹配 */}
        <ClipPath id="bgClip">
          <Rect x="0" y="0" width="100%" height="100%" rx="30" ry="30" />
        </ClipPath>
      </Defs>
      {/* 基础渐变背景 */}
      <Rect x="0" y="0" width="100%" height="100%" rx="30" ry="30" fill="url(#bgGrad)" />
      {/* 应用模糊的裁剪区域，叠加在背景上 */}
      <Use href="#bgClip" filter="url(#cornerBlur)" fill="#fff" opacity={0.3} />
    </Svg>
  );
};

export default GradientBlurBackground;

方案二：调整滤镜作用范围 #

手动设置滤镜的x/y/width/height属性，缩小滤镜的扩散边界，避免圆角处模糊过度：

<Filter id="cornerBlur" x="-3%" y="-3%" width="106%" height="106%">
  <FeGaussianBlur in="SourceGraphic" stdDeviation={8} />
</Filter>

根据实际效果调整数值，直到模糊角恢复预期形状。

方案三：单独绘制模糊角元素 #

不给整个背景加模糊，只针对需要模糊的两个角单独绘制小元素，再叠加到渐变背景上：

import Svg, { Defs, LinearGradient, Stop, Rect, Filter, FeGaussianBlur } from 'react-native-svg';

const GradientBlurBackground = () => {
  return (
    <Svg width="100%" height="100%">
      <Defs>
        <LinearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <Stop offset="0%" stopColor="#4c669f" />
          <Stop offset="100%" stopColor="#3b5998" />
        </LinearGradient>
        <Filter id="cornerBlur">
          <FeGaussianBlur in="SourceGraphic" stdDeviation={8} />
        </Filter>
      </Defs>
      {/* 基础渐变背景 */}
      <Rect x="0" y="0" width="100%" height="100%" rx="30" ry="30" fill="url(#bgGrad)" />
      {/* 左上角模糊角 */}
      <Rect x="0" y="0" width="60" height="60" rx="30" ry="30" fill="#fff" opacity={0.3} filter="url(#cornerBlur)" />
      {/* 右下角模糊角 */}
      <Rect x="100%" y="100%" width="60" height="60" rx="30" ry="30" fill="#fff" opacity={0.3} filter="url(#cornerBlur)" transform="translate(-60, -60)" />
    </Svg>
  );
};

export default GradientBlurBackground;

内容的提问来源于stack exchange，提问作者Nguyễn Hiếu