SVG 滤镜效果

使用 SVG 滤镜创建阴影、模糊、光照等高级视觉效果。

阴影 (Drop Shadow)

                <filter id="shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> <feOffset
                  dx="4" dy="4"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/>
                  </feMerge> </filter>
              

模糊 (Blur)

<filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter>

发光 (Glow)

                <filter id="glow"> <feGaussianBlur stdDeviation="8"/> <feMerge> <feMergeNode
                  in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter>
              

浮雕 (Emboss)

                <filter id="emboss"> <feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -3"/>
                  </filter>
              

颜色矩阵 (Color Matrix)

                <filter id="colorMatrix"> <feColorMatrix type="hueRotate" values="90"/>
                  </filter>
              

光照 (Lighting)

                <filter id="lighting"> <feSpecularLighting> <fePointLight x="100" y="50" z="200"/>
                  </feSpecularLighting> </filter>
              

💡 关键知识点

feGaussianBlur: 高斯模糊效果
feOffset: 偏移图像位置
feColorMatrix: 颜色变换（色相旋转、饱和度等）
feBlend: 混合两个输入图像
feComposite: 组合两个输入图像
feMerge: 合并多个滤镜结果
feSpecularLighting: 镜面光照效果
feDiffuseLighting: 漫反射光照效果
滤镜可以链式组合，创建复杂效果