SVG 模糊效果

模糊效果是 SVG 滤镜中最常用的效果之一，使用 <feGaussianBlur> 元素实现。

基本语法

html

<svg width="200" height="100">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
  </defs>
  
  <rect filter="url(#blur)" x="20" y="20" width="60" height="60" fill="#3b82f6"/>
</svg>

主要属性

属性	描述
`stdDeviation`	模糊程度（数值越大越模糊）
`in`	输入源
`result`	输出结果名称

不同模糊程度

html

<svg width="500" height="120">
  <defs>
    <filter id="blur0"><feGaussianBlur stdDeviation="0"/></filter>
    <filter id="blur2"><feGaussianBlur stdDeviation="2"/></filter>
    <filter id="blur5"><feGaussianBlur stdDeviation="5"/></filter>
    <filter id="blur10"><feGaussianBlur stdDeviation="10"/></filter>
  </defs>
  
  <g>
    <rect x="20" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur0)"/>
    <text x="50" y="100" text-anchor="middle" font-size="11">0</text>
  </g>
  
  <g>
    <rect x="120" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur2)"/>
    <text x="150" y="100" text-anchor="middle" font-size="11">2</text>
  </g>
  
  <g>
    <rect x="220" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur5)"/>
    <text x="250" y="100" text-anchor="middle" font-size="11">5</text>
  </g>
  
  <g>
    <rect x="320" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur10)"/>
    <text x="350" y="100" text-anchor="middle" font-size="11">10</text>
  </g>
</svg>

X/Y 方向独立模糊

可以分别设置 X 和 Y 方向的模糊程度：

html

<svg width="400" height="150">
  <defs>
    <!-- 水平模糊 -->
    <filter id="blurX" x="-20%" width="140%">
      <feGaussianBlur stdDeviation="10,0"/>
    </filter>
    <!-- 垂直模糊 -->
    <filter id="blurY" y="-20%" height="140%">
      <feGaussianBlur stdDeviation="0,10"/>
    </filter>
    <!-- 双向模糊 -->
    <filter id="blurXY" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="10,10"/>
    </filter>
  </defs>
  
  <rect x="30" y="30" width="80" height="80" fill="#3b82f6" filter="url(#blurX)"/>
  <text x="70" y="130" text-anchor="middle" font-size="11">水平模糊</text>
  
  <rect x="160" y="30" width="80" height="80" fill="#22c55e" filter="url(#blurY)"/>
  <text x="200" y="130" text-anchor="middle" font-size="11">垂直模糊</text>
  
  <rect x="290" y="30" width="80" height="80" fill="#ef4444" filter="url(#blurXY)"/>
  <text x="330" y="130" text-anchor="middle" font-size="11">双向模糊</text>
</svg>

模糊与原图结合

模糊背景

html

<svg width="250" height="150">
  <defs>
    <filter id="bgBlur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>
  
  <!-- 模糊背景 -->
  <rect x="20" y="20" width="210" height="110" rx="10" fill="#3b82f6" filter="url(#bgBlur)"/>
  
  <!-- 清晰前景 -->
  <rect x="40" y="40" width="170" height="70" rx="8" fill="white" opacity="0.9"/>
  <text x="125" y="80" text-anchor="middle" font-size="16" fill="#1f2937">清晰内容</text>
</svg>

毛玻璃效果

html

<svg width="300" height="200">
  <defs>
    <filter id="frosted" x="0" y="0" width="100%" height="100%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
    </filter>
  </defs>
  
  <!-- 背景图案 -->
  <rect x="0" y="0" width="300" height="200" fill="#3b82f6"/>
  <circle cx="50" cy="50" r="40" fill="#22c55e"/>
  <circle cx="150" cy="150" r="50" fill="#f59e0b"/>
  <circle cx="250" cy="80" r="35" fill="#ef4444"/>
  
  <!-- 毛玻璃遮罩 -->
  <rect x="50" y="50" width="200" height="100" rx="10" 
        fill="white" fill-opacity="0.3" filter="url(#frosted)"/>
  <rect x="50" y="50" width="200" height="100" rx="10" 
        fill="white" fill-opacity="0.5"/>
  <text x="150" y="105" text-anchor="middle" font-size="18" fill="#1f2937">Frosted Glass</text>
</svg>

动态模糊效果

悬停模糊

html

<style>
  .blur-hover {
    transition: filter 0.3s ease;
  }
  .blur-hover:hover {
    filter: url(#hoverBlur);
  }
</style>

<svg width="200" height="100">
  <defs>
    <filter id="hoverBlur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>
  
  <rect class="blur-hover" x="20" y="20" width="160" height="60" rx="8" fill="#3b82f6"/>
</svg>

模糊动画

html

<svg width="200" height="100">
  <defs>
    <filter id="animatedBlur">
      <feGaussianBlur stdDeviation="0">
        <animate attributeName="stdDeviation" values="0;5;0" dur="2s" repeatCount="indefinite"/>
      </feGaussianBlur>
    </filter>
  </defs>
  
  <circle cx="100" cy="50" r="35" fill="#3b82f6" filter="url(#animatedBlur)"/>
</svg>

实际应用示例

聚焦效果

html

<svg width="300" height="200">
  <defs>
    <filter id="focusBlur" x="-10%" y="-10%" width="120%" height="120%">
      <feGaussianBlur stdDeviation="4"/>
    </filter>
  </defs>
  
  <!-- 模糊的背景元素 -->
  <circle cx="60" cy="60" r="40" fill="#e5e7eb" filter="url(#focusBlur)"/>
  <circle cx="240" cy="60" r="35" fill="#e5e7eb" filter="url(#focusBlur)"/>
  <rect x="30" y="130" width="60" height="50" fill="#e5e7eb" filter="url(#focusBlur)"/>
  <rect x="210" y="120" width="70" height="60" fill="#e5e7eb" filter="url(#focusBlur)"/>
  
  <!-- 清晰的焦点元素 -->
  <circle cx="150" cy="100" r="50" fill="#3b82f6"/>
  <text x="150" y="107" text-anchor="middle" fill="white" font-size="16" font-weight="bold">焦点</text>
</svg>

加载状态

html

<svg width="200" height="80">
  <defs>
    <filter id="loadingBlur">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
  
  <!-- 模糊的占位内容 -->
  <rect x="20" y="15" width="160" height="20" rx="4" fill="#e5e7eb" filter="url(#loadingBlur)"/>
  <rect x="20" y="45" width="120" height="20" rx="4" fill="#e5e7eb" filter="url(#loadingBlur)"/>
</svg>

深度效果（景深）

html

<svg width="350" height="150">
  <defs>
    <filter id="farBlur"><feGaussianBlur stdDeviation="4"/></filter>
    <filter id="midBlur"><feGaussianBlur stdDeviation="1"/></filter>
  </defs>
  
  <!-- 远处（最模糊） -->
  <circle cx="280" cy="75" r="50" fill="#94a3b8" filter="url(#farBlur)"/>
  
  <!-- 中间（轻微模糊） -->
  <circle cx="180" cy="75" r="45" fill="#64748b" filter="url(#midBlur)"/>
  
  <!-- 近处（清晰） -->
  <circle cx="80" cy="75" r="55" fill="#3b82f6"/>
</svg>

遮罩模糊区域

html

<svg width="300" height="150">
  <defs>
    <filter id="blurMask" x="0" y="0" width="100%" height="100%">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <clipPath id="blurClip">
      <rect x="100" y="30" width="100" height="90"/>
    </clipPath>
  </defs>
  
  <!-- 背景 -->
  <rect x="20" y="20" width="260" height="110" rx="10" fill="#3b82f6"/>
  <text x="150" y="85" text-anchor="middle" fill="white" font-size="24">敏感内容</text>
  
  <!-- 局部模糊 -->
  <g clip-path="url(#blurClip)">
    <rect x="20" y="20" width="260" height="110" rx="10" fill="#3b82f6" filter="url(#blurMask)"/>
  </g>
</svg>

文字阴影效果

html

<svg width="300" height="80">
  <defs>
    <filter id="textBlur" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
      <feOffset in="blur" dx="3" dy="3" result="shadow"/>
      <feMerge>
        <feMergeNode in="shadow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <text x="150" y="50" text-anchor="middle" font-size="36" font-weight="bold" 
        fill="#1f2937" filter="url(#textBlur)">
    Shadow Text
  </text>
</svg>

霓虹发光

html

<svg width="300" height="100">
  <defs>
    <filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur1"/>
      <feGaussianBlur stdDeviation="8" result="blur2"/>
      <feMerge>
        <feMergeNode in="blur2"/>
        <feMergeNode in="blur1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <rect x="0" y="0" width="300" height="100" fill="#1f2937"/>
  <text x="150" y="60" text-anchor="middle" font-size="32" font-weight="bold" 
        fill="#22d3ee" filter="url(#neonGlow)">
    NEON
  </text>
</svg>

下一步

掌握了模糊效果后，接下来学习 SVG 阴影效果！

SVG 模糊效果 ​

基本语法 ​

主要属性 ​

不同模糊程度 ​

X/Y 方向独立模糊 ​

模糊与原图结合 ​

模糊背景 ​

毛玻璃效果 ​

动态模糊效果 ​

悬停模糊 ​

模糊动画 ​

实际应用示例 ​

聚焦效果 ​

加载状态 ​

深度效果（景深） ​

遮罩模糊区域 ​

文字阴影效果 ​

霓虹发光 ​

下一步 ​

SVG 模糊效果

基本语法

主要属性

不同模糊程度

X/Y 方向独立模糊

模糊与原图结合

模糊背景

毛玻璃效果

动态模糊效果

悬停模糊

模糊动画

实际应用示例

聚焦效果

加载状态

深度效果（景深）

遮罩模糊区域

文字阴影效果

霓虹发光

下一步