如何创建结合feTurbulence和feGaussianBlur的SVG模糊颗粒感圆形

核心问题出在滤镜的执行顺序和图层合并逻辑，按照先模糊、再叠加颗粒、最后裁剪范围的顺序配置滤镜即可实现需求，完整可直接使用的代码如下：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blurGrain" x="-50%" y="-50%" width="200%" height="200%">
      <!-- 对原始圆形做高斯模糊，stdDeviation控制模糊强度 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blurredShape" />
      <!-- 生成颗粒噪波，baseFrequency控制颗粒粗细，numOctaves控制颗粒层次感 -->
      <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" result="grainNoise" />
      <!-- 把噪波转为灰度，避免颗粒带杂色 -->
      <feColorMatrix in="grainNoise" type="saturate" values="0" result="grayGrain" />
      <!-- 叠加颗粒和模糊后的圆形，mode可换overlay/multiply调整颗粒显示效果，opacity控制颗粒浓度 -->
      <feBlend in="blurredShape" in2="grayGrain" mode="soft-light" opacity="0.4" result="blended" />
      <!-- 裁剪掉圆形外多余的颗粒，保证效果只在图形范围内生效 -->
      <feComposite in="blended" in2="blurredShape" operator="in" />
    </filter>
  </defs>
  <!-- 调用滤镜的圆形，fill可自定义颜色或者渐变 -->
  <circle cx="200" cy="200" r="100" fill="#ff8a80" filter="url(#blurGrain)" />
</svg>

可调参数说明 #

• feGaussianBlur的stdDeviation属性：数值越大模糊程度越高，按需调整即可匹配想要的柔化效果
• feTurbulence的baseFrequency属性：数值越小颗粒纹理越粗，数值越大颗粒越细腻
• feBlend的opacity属性：控制颗粒的明显程度，0为完全无颗粒，1为颗粒完全覆盖下层模糊效果
• feBlend的mode属性：替换为overlay颗粒对比度更高，替换为multiply颗粒颜色更深，可根据图形颜色调整适配

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