SVG 过滤效果生成器
指导
SVG 过滤效果生成器
设计SVG <filter> 直观地查看效果。选择一个过滤器原语——高斯模糊、颜色矩阵变体（色调旋转、饱和度、亮度转Alpha）、湍流与位移、阴影或卷积矩阵预设（浮雕、雕刻、锐化、边缘检测）——并通过滑块调整其参数，同时实时查看在文本、形状或上传的照片上的SVG预览。复制生成的 <filter> XML块和一个可直接粘贴的CSS使用片段。
如何使用
- 从 筛选 下拉菜单中选择一个过滤器原语。
- 设置一个唯一的 过滤器ID ——它将成为
id在<filter>元素中的ID，并成为url(#…). - 调整所选原语出现的参数（滑块、颜色选择器、噪声类型等）。
- 在文本、形状或照片之间切换——上传自己的图像以查看在真实内容上的效果。 预览目标 插入到页面中（它可以位于任何位置——甚至在隐藏的零大小SVG内部）。
- 复制生成的 SVG过滤器XML 使用包含的片段在CSS中应用它：使用原生简写（如果可用）或
- 七种过滤器原语
filter: url(#filterId)引用。
特征
- ——高斯模糊、色调旋转、饱和度、亮度转Alpha、湍流与位移、阴影以及卷积矩阵预设（浮雕、雕刻、锐化、边缘检测）。 ——在拖动滑块时即时获得视觉反馈；无需重建步骤，无闪烁。
- 实时SVG预览 三种预览目标
- ——应用于清晰的文本、基本形状或您上传的照片，以查看过滤器在真实内容上的表现。 两种输出
- ——完整的 XML块（可直接粘贴到任何SVG中）和一个带有原生简写（如果可用）的CSS使用片段。
<filter>带有透明度的阴影 - ——结合 ，这是原生CSS简写无法表达的。
feDropShadow是快速路径，但它对属性处理不一致，且在边缘情况中可能丢失数据。在处理SOAP响应的生产环境中，建议使用flood-opacity经过清理的过滤器ID - ——确保您的 值在
id中是安全的url(#…)引用。
常问问题
-
CSS过滤器和SVG过滤器有什么区别？
CSS过滤器简写（如模糊、色调旋转、阴影等）是一系列固定的特效，浏览器会将其映射到底层的SVG过滤器原语。SVG 允许您直接访问这些原语——feGaussianBlur、feColorMatrix、feTurbulence、feDisplacementMap、feConvolveMatrix等——并组合它们以创建特效（变形、噪声、浮雕、通道操作），这些特效是简写无法表达的。您在CSS中能做的，您在SVG中也能做，但反过来则不一定成立。
-
feGaussianBlur中的stdDeviation属性是什么意思？
stdDeviation是用于加权邻近像素的高斯分布的标准差。较大的值会将加权范围扩展到更多像素，从而产生更模糊的效果。您可以传递一个数字（在X和Y轴上均匀模糊）或两个用空格分隔的数字（在X和Y轴上具有不同的模糊程度）以实现方向性柔化。
-
feTurbulence是如何工作的，为什么需要与feDisplacementMap搭配使用？
feTurbulence会程序性地在SVG图像中生成类似Perlin的噪声，由baseFrequency（噪声比例）和numOctaves（细节级别）控制。噪声本身仅是一个彩色纹理。feDisplacementMap将该噪声作为in2输入，并使用其R/G通道来偏移源图形的像素，从而产生有机的变形、烟雾、水波纹和扭曲效果。scale属性控制每个像素可以被偏移的距离。
-
什么是核矩阵，feConvolveMatrix如何产生浮雕或边缘效果？
feConvolveMatrix会将一个小的矩阵（核）滑过每个像素，将每个单元格乘以相应的邻近像素并求和结果。不同的核会产生不同的效果：一个从左上角到右下角邻居相减的核会产生我们读作浮雕的方向性阴影；一个在中心为正数、周围为-1的核会放大差异，从而产生边缘检测或锐化效果。order属性设置核的大小（通常为3，对应3x3矩阵），divisor和bias用于归一化输出。
-
为什么我的SVG过滤器在使用CSS filter: url(#id)时无法工作？
三个常见原因：（1）当CSS规则应用时，元素尚未存在于DOM中——请确保过滤器SVG内联嵌入到页面中，而不是加载一个浏览器阻止的外部文件。（2）您引用的ID与元素上的ID不匹配（大小写敏感，必须唯一）。（3）您正在过滤的元素大小为零或被默认过滤区域裁剪——请在上设置明确的x、y、width、height（通常为x="-30%" y="-30%" width="160%" height="160%"），以确保像模糊或阴影这样的效果不会被裁剪。
