使用SVG feGaussianBlur与radialGradient实现中心清晰边角模糊效果

问题排查与修正 #

你代码的核心错误是radialGradient径向渐变不能直接作为SVG滤镜的输入源，滤镜只能识别滤镜原语的输出结果，你需要先用feImage节点引入定义好的径向渐变，再传给feComposite做合成。

具体修改步骤如下：

• 把<radialGradient>从<filter>节点内移到<defs>下，和<filter>平级，渐变本身不属于滤镜原语，不能放在filter标签内。
• 在filter内新增<feImage>节点，通过xlink:href引用你定义的径向渐变，作为遮罩层输入。
• 调整渐变透明度范围和feMerge层级，保证中心显示原始清晰图像、边缘叠加模糊效果。

修正后的可运行代码如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
  <defs>
    <!-- 径向渐变移到filter外平级放置 -->
    <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="70%" stop-color="white" stop-opacity="0" />
      <stop offset="100%" stop-color="white" stop-opacity="1" />
    </radialGradient>

    <filter id="blurlayer" width="100%" height="100%">
      <feGaussianBlur stdDeviation="8" result="blur" />
      <!-- 用feImage引入径向渐变作为遮罩 -->
      <feImage xlink:href="#radialGradient" result="mask" width="100%" height="100%" />
      <!-- 用渐变把模糊层的中心区域挖空 -->
      <feComposite in="blur" in2="mask" operator="in" result="comp" />
      <!-- 底层放原始清晰图，上层叠加边缘模糊层 -->
      <feMerge>
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
  </defs>

  <image filter="url(#blurlayer)" x="0" y="0" width="100%" height="100%" xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg"/>
</svg>

补充注意事项 #

该方案在Chrome、Edge、Safari等主流浏览器上运行正常，但在Firefox浏览器中渲染Three.js场景时会出现明显卡顿，可根据目标用户群体酌情选用。

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