Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
SVG 滤镜指南 – Gaussian Blur、阴影和光照效果
Contents
[
Hide
Show
]SVG filters 可以直接在 SVG 标记中创建模糊、投影、光照、饱和度变化、色相旋转和通道调整等视觉效果。本教程解释滤镜如何在 <defs> 中定义，filter primitives 如何组合工作，以及如何把滤镜应用到形状、文本或图像。
快速回答： 在 <defs> 中定义 SVG <filter>，添加一个或多个 filter primitives，例如 <feGaussianBlur>、<feOffset>、<feBlend>、<feSpecularLighting> 或 <feColorMatrix>，然后在目标元素上用 filter="url(#filter-id)" 应用滤镜。
1<svg width="220" height="140" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="soft-blur">
4 <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
5 </filter>
6 </defs>
7 <circle cx="110" cy="70" r="45" fill="#20b2aa" filter="url(#soft-blur)" />
8</svg>本文将学习如何：
- 定义 SVG filter 并用
filter属性应用它； - 把 filter primitives 组合成模糊、阴影、光照和颜色效果；
- 控制 filter region，避免输出被裁剪；
- 在
<feGaussianBlur>、<feColorMatrix>和<feComponentTransfer>之间选择； - 排查 SVG filters 的常见渲染问题。
什么是 SVG Filter？
SVG filters 在最终渲染前为位图或矢量图形添加视觉效果。filter 可以模糊元素、创建阴影、改变颜色通道、添加光照、扭曲像素，或把多个中间结果组合成一个效果。由于效果保留在 SVG 标记中，它可以随矢量图形一起缩放，并保持可编辑。
filter 由放在 <defs> 块中的 <filter> 元素定义。<filter> 本身不会渲染；它的子元素，即 filter primitives，执行实际处理。<filter> 元素定义所有 filter primitives 工作的坐标系统和区域。常用关键属性包括：
x,y,width,height– 定义应用滤镜的矩形区域filterUnits– 指定 filter region 的坐标系统（userSpaceOnUse或objectBoundingBox）primitiveUnits– 定义 filter primitives 内部使用的坐标系统- Core 和 presentation attributes – 如
id、class、style以及 presentation properties
SVG Filters 与 Filter Primitives
SVG filters 通过组合多个 filter primitives 构建。
- 每个 filter primitive 执行一个图形操作并输出一个结果。通过串联 primitives，可以创建复杂效果，一个 primitive 的输出可以成为下一个 primitive 的输入。
- 大多数 filter primitives 接受一个或两个命名输入并生成一个结果。主要输入由
in属性指定，默认是in="SourceGraphic"。操作输出可用result命名，供后续 primitive 复用。 - 每个 filter primitive 也可以通过
x、y、width、height定义自己的处理区域，该区域相对于<filter>region 解析。
下表概述常见 SVG filter 元素、用途和关键属性。多数行是 filter primitives；<fePointLight> 等光源元素用于 lighting primitives 内部。
| 类别 | Filter element | 用途 | 关键属性 |
|---|---|---|---|
| Gaussian Blur | <feGaussianBlur> | 使用高斯函数模糊输入图像 | in, stdDeviation, result |
| Drop Shadow | <feOffset> | 偏移 alpha 通道以创建阴影基础 | in, dx, dy, result |
| Drop Shadow | <feGaussianBlur> | 软化偏移后的阴影 | in, stdDeviation, result |
| Drop Shadow | <feBlend> | 将阴影与原始图形混合 | in, in2, mode |
| Light Effects | <feSpecularLighting> | 使用光源生成镜面高光 | in, surfaceScale, specularConstant, specularExponent, lighting-color, result |
| Light Effects | <feDiffuseLighting> | 使用光源生成漫反射光照 | in, surfaceScale, diffuseConstant, lighting-color, result |
| Light Effects | <fePointLight> | 为 lighting primitives 定义点光源 | x, y, z |
| Light Effects | <feComposite> | 将光照与源图形组合 | in, in2, operator, k1, k2, k3, k4, result |
| Color Filters | <feColorMatrix> | 应用基于矩阵的颜色变换 | in, type, values, result |
| Color Filters | <feComponentTransfer> | 对各颜色通道应用传递函数 | in, result |
每个 filter 都需要输入图像或源图形才能处理。in 和 result 很重要，因为它们让一个 primitive 的输出传给链中的下一个 primitive。
如何创建 SVG Filters
- 添加
<defs>块，存放不应单独渲染的 filter definitions。 - 创建
<filter>元素并设置稳定的id。 - 添加一个或多个 filter primitives，例如
<feGaussianBlur>、<feOffset>、<feBlend>或<feColorMatrix>。 - 当后续 primitive 需要使用前面 primitive 的输出时，使用
in和result。 - 当模糊、阴影或光照超出原始形状边界时，扩大
x、y、width和height。 - 在目标形状、文本、组或图像上使用
filter="url(#id)"应用滤镜。
Gaussian Blur
Gaussian blur 通过高斯函数扩散附近像素，使图像或形状变柔和。在 SVG 中，它常用于阴影、发光、柔焦、降低细节和方向性模糊。
<feGaussianBlur> primitive 创建模糊。stdDeviation 属性控制模糊半径。一个值表示 x 和 y 方向相同模糊；两个值创建方向性模糊，第一个值用于 x 轴，第二个值用于 y 轴。
下面的示例在同一个 SVG 文件中比较不同 stdDeviation 值（
gaussian-blur.svg）：
1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
4 <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
5 </filter>
6 <filter id="f2" x="-20%" y="-20%" width="140%" height="140%">
7 <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
8 </filter>
9 <filter id="f3" x="-20%" y="-20%" width="140%" height="140%">
10 <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
11 </filter>
12 </defs>
13 <g stroke="none" fill="#20B2AA">
14 <ellipse cx="60" cy="80" rx="55" ry="35" />
15 <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
16 <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
17 <ellipse cx="500" cy="80" rx="55" ry="35" filter="url(#f3)" />
18 </g>
19</svg>
模糊通常会让可见结果超出原始形状。如果 filter region 太小，模糊边缘会被裁剪。示例通过负的 x 和 y 值扩大 filter region，使柔化边缘保持可见。
你可以使用 Aspose.SVG for .NET API 在 C# 中创建 Gaussian Blur 效果。有关 Aspose.Svg.Filters namespace 以及使用 SVGFEGaussianBlurElement 类把 Gaussian Blur 应用到 SVG 元素和位图的详细示例，请参见
Gaussian Blur 文章。
Drop Shadow Effect
Drop shadow 可以让形状或文本与背景分离。在 SVG 中，阴影通常由源 alpha 通道、偏移、模糊以及 blend 或 merge 步骤构成。
<feOffset> filter primitive 用于偏移一个图层。除了 in 和 result 属性，它还接受 dx 和 dy，分别定义沿 x 轴和 y 轴的偏移距离。<feBlend> filter primitive 混合两个输入层；它的 mode 属性定义混合模式。
以下 SVG 为椭圆创建柔和投影（ drop-shadow-effect.svg）：
1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
4 <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
5 <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
6 <feBlend in="SourceGraphic" in2="blur" mode="normal" />
7 </filter>
8 </defs>
9 <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
10</svg>
逐步说明
<feOffset>使用in="SourceAlpha"，将 alpha mask 向右和向下各移动 10 px，并把中间结果保存为"offset"。使用SourceAlpha会基于形状轮廓创建阴影，而不是基于 fill 颜色。<feGaussianBlur>使用in="offset"，应用值为 10 的模糊，并把结果保存到名为"blur"的临时缓冲区。<feBlend>使用in="SourceGraphic"和in2="blur"，把原始椭圆与模糊后的偏移阴影一起绘制出来。
你可以使用 Aspose.SVG for .NET API 在 C# 中创建 drop shadow 效果。请阅读 Drop Shadow Effect 文章，了解 Aspose.Svg.Filters namespace，并查看把 drop shadow 应用到 SVG 形状和文本的详细 C# 示例。
SVG Light Effects
SVG lighting effects 在一个 <filter> 内创建，使用 <feDiffuseLighting> 和 <feSpecularLighting> 等 lighting primitives，以及 <fePointLight> 等光源元素。lighting primitives 使用源 alpha 通道作为表面映射，并计算光在该表面上的表现。
<fePointLight> 元素定义点光源，作为 <feDiffuseLighting> 或 <feSpecularLighting> 的子元素使用。它的 x、y 和 z 属性设置光源位置。Diffuse lighting 创建哑光照明表面，specular lighting 创建更亮的高光。
看一个光照效果示例（ light-effect.svg）：
1<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id = "F1">
4 <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
5 <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
6 <fePointLight x = "80" y = "60" z = "200" />
7 </feSpecularLighting>
8 <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
9 </filter>
10 </defs>
11 <g fill = "INDIANRED" filter = "url(#F1)">
12 <circle cx="100" cy="100" r="60" />
13 <circle cx="100" cy="230" r="60" />
14 <circle cx="230" cy="100" r="60" />
15 <circle cx="230" cy="230" r="60" />
16 </g>
17</svg>
逐步说明
在这个示例中，光照效果由一个 <filter> 内部的 SVG 元素链创建：其中三个元素是 filter primitives，<fePointLight> 定义光源：
<feGaussianBlur>接收SourceAlpha输入，也就是源图像的 alpha 通道。结果保存到名为"blur"的临时缓冲区。- 光照由
<feSpecularLighting>及其子元素<fePointLight>创建。<feSpecularLighting>使用"blur"缓冲区作为表面高度图，并把高光保存为"light"。 <feComposite>接收in="SourceGraphic"和in2="light"，然后使用 arithmetic compositing operation 合并它们。对每个像素，算术运算符计算：result = k1·in1·in2 + k2·in1 + k3·in2 + k4。
下面的代码演示在一个 <filter> 中继续串联 filter primitives 和光源的示例（
button.svg）：
1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="myF" x="-20%" y="-20%" width="160%" height="160%">
4 <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
5 <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
6 <feSpecularLighting in="offsetBlur" surfaceScale="8" specularConstant="0.7" specularExponent="2" lighting-color="#bbbbbb" result="specOut">
7 <fePointLight x="-100" y="-100" z="100" />
8 </feSpecularLighting>
9 <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
10 <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1.5" k2="0.5" k3="1" k4="0" result="litPaint" />
11 <feMerge>
12 <feMergeNode in="offsetBlur" />
13 <feMergeNode in="litPaint" />
14 </feMerge>
15 </filter>
16 </defs>
17 <ellipse cx="85" cy="70" rx="65" ry="45" fill="#20B2AA" filter="url(#myF)" />
18 <g fill="#696969" font-size="25" font-family="arial">
19 <text x="55" y="80">PUSH</text>
20 </g>
21</svg>
在 SVG Lighting Effects 中，你将学习如何使用 Aspose.SVG for .NET API 在 C# 中组合 filter primitives 和光源，创建并控制 SVG lighting effects。
Color Filters
在 SVG 中，可以创建多种现代浏览器广泛支持的颜色效果。处理颜色时，<feColorMatrix> 通常是重要选项。它是一个 filter primitive，使用矩阵影响每个 RGBA 通道的颜色值。<feComponentTransfer> 是另一个强大的 SVG filter primitive，可分别控制图像的 RGBA 通道，从而创建类似 Photoshop 的 SVG 效果，例如 posterize 图像。
本节聚焦两个实用颜色 primitives：用于矩阵变换的 <feColorMatrix>，以及用于逐通道编辑的 <feComponentTransfer>。
feColorMatrix 饱和度示例
<feColorMatrix> filter primitive 对输入图像中每个像素的 RGBA 通道应用矩阵变换，从而产生新的颜色和 alpha 值。type 属性可以是：
matrix– 自定义 5×4 矩阵saturate– 调整饱和度hueRotate– 围绕色轮旋转色相luminanceToAlpha– 将亮度转换为 alpha
下面看 saturate 操作示例（ saturation.svg）：
1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="myFilter">
4 <feColorMatrix in="SourceGraphic" type="saturate" values="0"></feColorMatrix>
5 </filter>
6 </defs>
7 <image filter="url(#myFilter)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>
feColorMatrix Hue Rotation 示例
一种特定的 color-matrix 操作是围绕 color wheel 旋转色相。下面示例展示 hueRotate 操作。
1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="hueR">
4 <feColorMatrix in="SourceGraphic" type="hueRotate" values="40"></feColorMatrix>
5 </filter>
6 </defs>
7 <image filter="url(#hueR)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
8</svg>下图包含一组图像，展示不同 hueRotate 值的效果。
feComponentTransfer 通道处理示例
<feComponentTransfer> primitive 对 RGBA 值执行逐通道操作。它适合调整亮度、改变对比度、平衡通道和创建 posterized 颜色效果。
下面的示例分别改变红、绿、蓝通道：
1<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="RGBA">
4 <feComponentTransfer>
5 <feFuncR type="linear" slope="2.0" />
6 <feFuncG type="linear" slope="1.7" />
7 <feFuncB type="linear" slope="0.1" />
8 <feFuncA type="identity" />
9 </feComponentTransfer>
10 </filter>
11 </defs>
12 <image filter="url(#RGBA)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
13</svg>
<feComponentTransfer> 元素通过子 transfer function 元素修改颜色通道：<feFuncR>、<feFuncG>、<feFuncB> 和 <feFuncA>。每个子元素控制红、绿、蓝或 alpha 通道。type 属性选择该通道使用的 transfer function。SVG 支持五种函数类型：identity, table, discrete, linear 和 gamma。
如果想在 C# 中创建 color filters，请阅读
Color Filters 文章。你将了解 feColorMatrix 和 feComponentTransfer filter primitives，并查看相关 C# 代码片段。
Common Mistakes and Fixes
| 问题 | 原因 | 解决方法 |
|---|---|---|
| Filter 输出被裁剪 | filter region (x, y, width, height) 太小 | 使用负 x、y 和更大的 width、height 扩大 filter region |
| Drop shadow 不可见 | 阴影使用 SourceGraphic 而不是 SourceAlpha，或混合方式错误 | 对 <feOffset> 使用 SourceAlpha 作为输入，并与原始图形混合 |
| 光照效果平淡或不可见 | alpha 通道未作为 bump map 准备，或光照值太低 | 光照前先模糊 SourceAlpha，并调整光照参数 |
| 颜色变化异常 | 应用了错误的 color matrix 或 transfer values | 直接对 SourceGraphic 应用 color filters，并逐步验证数值 |
Quick Recipes
创建简单 Gaussian blur
1<filter id="blur">
2 <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
3</filter>应用方向性模糊
1<filter id="directionalBlur">
2 <feGaussianBlur in="SourceGraphic" stdDeviation="8 0" />
3</filter>添加柔和 drop shadow
1<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
2 <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
3 <feGaussianBlur in="offset" stdDeviation="6" result="blur" />
4 <feBlend in="SourceGraphic" in2="blur" mode="normal" />
5</filter>将图像转换为灰度
1<filter id="grayscale">
2 <feColorMatrix type="saturate" values="0" />
3</filter>调整亮度和对比度
1<filter id="brightnessContrast">
2 <feComponentTransfer>
3 <feFuncR type="linear" slope="1.2" intercept="0.1" />
4 <feFuncG type="linear" slope="1.2" intercept="0.1" />
5 <feFuncB type="linear" slope="1.2" intercept="0.1" />
6 </feComponentTransfer>
7</filter>FAQ – SVG Filters
如何把 SVG filter 应用到元素？
在 <defs> 中定义 filter，并在形状、文本元素、组或图像上使用 filter="url(#filter-id)"。filter 定义中的 id 必须与 filter 属性中的值匹配。
为什么 SVG blur 或 shadow 被裁剪？
模糊和阴影效果经常超出原始对象边界。使用 x、y、width 和 height 扩大 filter region，让生成像素有足够空间渲染。
feColorMatrix 和 feComponentTransfer 有什么区别？
当一个矩阵操作需要变换颜色值，例如灰度、饱和度或 hue rotation 时，使用 <feColorMatrix>。当需要分别控制红、绿、蓝或 alpha 通道时，使用 <feComponentTransfer>。
可以用 Aspose.SVG for .NET 创建 SVG filters 吗？
可以。 SVG Filters in C# 文章展示如何使用 Aspose.SVG for .NET 以编程方式创建 SVG filters。
相关资源
- Filter Effects Module Level 1 是 SVG 和 CSS filter effects 的 W3C 规范。
- SVG Filters in C# 解释如何使用 Aspose.SVG for .NET 创建 SVG filters、Gaussian blur、shadows、lighting 和 color effects。
- Work with SVG Filters in Python 展示如何使用 Aspose.SVG for Python via .NET 创建、应用和编辑 SVG filter effects。
- Gaussian Blur 提供
<feGaussianBlur>primitive 的聚焦 C# 工作流。 - Drop Shadow Effect 展示如何为 SVG 形状和文本构建阴影效果。
- Color Filters 覆盖 C# 示例中的
<feColorMatrix>和<feComponentTransfer>。 - SVG 渐变 解释渐变填充，它们常与滤镜图形配合使用。
- SVG 颜色 解释 SVG 图形使用的颜色值、fill、stroke、不透明度和颜色格式。