投影 – SVG 滤镜 – C# 代码
SVG 滤镜 – SVG Filters
Aspose.SVG for .NET 允许您打开、创建或编辑 SVG 文档并更改其内容。您可以对 SVG 元素或位图应用许多可用的 SVG 过滤器以获得所需的结果。 Aspose.Svg.Filters 命名空间包含 SVG 规范中与滤镜效果相关的类和接口。要创建投影效果,您可以使用一些滤镜基元:
- SVGFEDropShadowElement 类创建一个
<feDropShadow>
元素来实现投影效果; - SVGFEOffsetElement 类创建一个
<feOffset>
元素来偏移 SVG 中的图层; - SVGFEGaussianBlurElement类对应一个
<feGaussianBlur>
元素来实现高斯模糊效果; - SVGFEBlendElement 创建一个
<feBlend>
元素来混合两个或多个对象。
在本文中,您将学习如何编写 SVG 代码来创建投影滤镜,并考虑使用 Aspose.Svg.Filters 命名空间将投影效果应用于 SVG 元素或位图的详细 C# 示例。
投影 – Drop Shadow – SVG 代码
SVG 中的阴影效果是一种常见的视觉效果,用于在 SVG 元素后面创建阴影的错觉。它使 SVG 内容看起来像是漂浮在背景之上,从而为 SVG 内容提供深度和真实感。此外,还可以使用投影效果使图像脱颖而出。在 SVG 中实现阴影效果有多种方法。让我们看一下其中的两个。
注意: 在 SVG 中,过滤器由<filter>
元素定义,该元素在<defs>
元素内设置。它永远不会自行渲染,并且在概念上被描述为包含其子元素(过滤器基元)的元素。 <filter>
元素有一组属性。过滤器基元所需的属性是x, y, width, height
和id
。他们设置将应用滤镜的图片区域。属性id
为 SVG 元素提供唯一标识符,并标识 SVG 文档中的元素。
feOffset
+ feGaussianBlur
+ feBlend
滤镜基元
我们认为,最有效的是使用三个滤镜来实现阴影效果。这将允许您微调效果,即使它需要更多代码:
1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="shadow" x="-20" y="-20" height="150" width="150" >
4 <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
5 <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
6 <feBlend in="SourceGraphic" in2="blur" mode="normal" />
7 </filter>
8 </defs>
9 <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
10</svg>
使用三个滤镜来创建投影效果(图 c):
<feOffset>
过滤器原语用于偏移 SVG 中的图层。它采用in="SourceAlpha"
,将结果向右移动 10 像素,向下移动 10 像素,并将结果作为“偏移”存储在缓冲区中。请注意,形状的 Alpha 通道用作输入。值SourceAlpha
会产生黑色结果(图 a)。<feGaussianBlur>
采用in="offset"
,应用stdDeviation="3"
的模糊,并将结果存储在名为"blur"
的临时缓冲区中。<feBlend>
过滤器混合两个对象;它需要两个输入in =“SourceGraphic”
和in2 =“blur”
,然后将SourceGraphic
混合在偏移黑色模糊图像的顶部(图b)。它的mode
属性指定混合模式。
下图说明了阴影创建的逐步过程:
feDropShadow
过滤器基元
在 SVG 中,可以使用<filter>
元素上的 feDropShadow
滤镜基元来实现阴影效果。 <feDropShadow>
元素具有创建阴影所需的属性,例如 dx、dy
和 stdDeviation
,此外它还允许您向阴影添加颜色和透明度!这是使用属性 flood-color
和 flood-opacity
来实现的。让我们看看如何使用 feDropShadow
滤镜基元创建阴影效果:
1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
2 <defs>
3 <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
4 <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="CornflowerBlue" />
5 </filter>
6 </defs>
7 <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
8</svg>
注意: 如果flood-color
属性没有指定或者指定不正确,那么默认阴影将为黑色。
投影 – C# 代码
在这里,我们将编写 С# 代码,使用三个滤镜基元为橙色矩形创建阴影效果。
以下代码片段展示了如何使用 Aspose.SVG for .NET API 创建投影效果。
- 使用 SVGDocument() 构造函数创建一个空的 SVG 文档。
- SVGDocument 类的 RootElement 属性指向文档的根
<svg>
元素。 - 创建一个
<defs>
元素并将其添加到<svg>
元素:- 使用 CreateElementNS() 方法创建 SVGDefsElement 类的实例。
- 使用
AppendChild() 方法将
<defs>
元素添加到<svg>
元素。
- 创建一个
<filter>
元素,设置属性,并将其添加到<defs>
元素中:- 使用 SVGDocument 类的 CreateElementNS() 方法创建 SVGFilterElement 类的实例。
- 调用
SetAttribute(
name, value
) 方法设置x, y, height
和width
属性。 - 不要忘记设置
id
属性。 - 使用
AppendChild() 方法将
<filter>
添加到<defs>
元素。
- 创建一个
<feOffset>
元素,设置属性,并将其添加到<filter>
元素:- 使用 SVGDocument 类的 CreateElementNS() 方法创建 SVGFEOffsetElement 类的实例。
- 调用
SetAttribute(
name, value
) 方法设置dx、dy
和result
属性。 - 不要忘记设置
in1
属性。使用 SVGAnimatedLength 类型的属性,可以通过构造feOffsetElement.In1.BaseVal = "SourceAlpha"
来设置或读取其静态数据。 - 使用
AppendChild() 方法将
<feOffset>
添加到<filter>
元素。
- 以类似的方式创建、设置属性,并向
<filter>
元素添加<feGaussianBlur>
和<feBlend>
等元素。 - 创建一个矩形
<rect>
元素,该元素将是具有投影效果的 SVG 形状。它被赋予fill
颜色(#ffa500 – 橙色),并且filter
属性设置为url(#shadow)
,引用先前定义的带有Id =“shadow”
的过滤器。 - 调用 Save()方法将带有阴影滤镜的文档保存到path指定的本地文件中。
1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Filters;
4...
5 // Set SVG Namespace Url
6 string SvgNamespace = "http://www.w3.org/2000/svg";
7
8 using (var document = new SVGDocument())
9 {
10 var svgElement = document.RootElement;
11
12 // Create a <defs> element and add to the svgElement
13 var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
14 svgElement.AppendChild(defsElement);
15
16 // Creating a <filter> element and add to the defsElement
17 var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
18 filterElement.Id = "shadow";
19 filterElement.SetAttribute("x", "-20px");
20 filterElement.SetAttribute("y", "-20px");
21 filterElement.SetAttribute("height", "150px");
22 filterElement.SetAttribute("width", "150px");
23 defsElement.AppendChild(filterElement);
24
25 // Create a <feOffset> filter primitive and add it to the filterElement
26 var feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
27 feOffsetElement.In1.BaseVal = "SourceAlpha";
28 feOffsetElement.SetAttribute("result", "offset");
29 feOffsetElement.SetAttribute("dx", "10");
30 feOffsetElement.SetAttribute("dy", "10");
31 filterElement.AppendChild(feOffsetElement);
32
33 // Create a <feGaussianBlur> filter primitive and add it to the filterElement
34 var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
35 feGaussianBlurElement.In1.BaseVal = "offset";
36 feGaussianBlurElement.StdDeviationX.BaseVal = 3;
37 feGaussianBlurElement.StdDeviationY.BaseVal = 3;
38 feGaussianBlurElement.SetAttribute("result", "blur");
39 filterElement.AppendChild(feGaussianBlurElement);
40
41 // Create a <feBlend> filter primitive and add it to the filterElement
42 var feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
43 feBlendElement.In1.BaseVal = "SourceGraphic";
44 feBlendElement.In2.BaseVal = "blur";
45 feBlendElement.SetAttribute("mode", "normal");
46 filterElement.AppendChild(feBlendElement);
47
48 // Create a <rect> element and set the "fill" and "filter" attributes
49 var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
50 rectElement.X.BaseVal.Value = 40;
51 rectElement.Y.BaseVal.Value = 40;
52 rectElement.Width.BaseVal.Value = 100;
53 rectElement.Height.BaseVal.Value = 100;
54 rectElement.SetAttribute("fill", "#ffa500");
55 rectElement.SetAttribute("filter", "url(#shadow)");
56 svgElement.InsertBefore(rectElement, svgElement.FirstChild);
57
58 // Save the document
59 document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
60 }
当您运行此 C# 代码时,它将生成一个带有橙色矩形阴影效果的 SVG 文件。阴影将为黑色,与源矩形水平偏移 10 个单位,垂直偏移 10 个单位。生成的 drop-shadow-effect.svg 文件类似于图 c – 带有黑色阴影的橙色矩形。
文本阴影 – Text Drop Shadow
此 C# 示例创建一个 SVG 文件,类似于我们之前在
feDropShadow
滤镜原语 部分中看到的文件。仅在这里,我们使用 feDropShadow
滤镜基元为 SVG 文本(而不是橙色矩形)创建彩色阴影。
以下代码片段展示了如何使用 Aspose.SVG for .NET API 创建文本阴影:
1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Filters;
4...
5
6 // Set SVG Namespace Url
7 string SvgNamespace = "http://www.w3.org/2000/svg";
8
9 using (var document = new SVGDocument())
10 {
11 var svgElement = document.RootElement;
12
13 // Create a <defs> element and add to the svgElement
14 var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
15 svgElement.AppendChild(defsElement);
16
17 // Creating a <filter> element and add to the defsElement
18 var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
19 filterElement.Id = "text-shadow";
20 filterElement.SetAttribute("x", "-20px");
21 filterElement.SetAttribute("y", "-20px");
22 filterElement.SetAttribute("height", "150px");
23 filterElement.SetAttribute("width", "150px");
24 defsElement.AppendChild(filterElement);
25
26 // Create a <feDropShadow> filter primitive and add it to the filterElement
27 var feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
28 feDropShadowElement.StdDeviationX.BaseVal = 3;
29 feDropShadowElement.StdDeviationY.BaseVal = 3;
30 feDropShadowElement.SetAttribute("dx", "3");
31 feDropShadowElement.SetAttribute("dy", "3");
32 //feDropShadowElement.SetAttribute("flood-color", "LightCoral");
33 filterElement.AppendChild(feDropShadowElement);
34
35 // Create a <text> element and add it to the svgElement
36 var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
37 textElement.Style.FontSize = "4em";
38 textElement.SetAttribute("x", "20px");
39 textElement.SetAttribute("fill", "CornflowerBlue");
40 textElement.SetAttribute("y", "100px");
41 textElement.TextContent = "Drop Shadow Effect";
42 textElement.SetAttribute("filter", "url(#text-shadow)");
43 svgElement.InsertBefore(textElement, svgElement.FirstChild);
44
45 // Save the document
46 document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
47 }
生成的 text-drop-shadow.svg 图像如下所示:
文本有一个阴影,填充颜色为 LightCoral,模糊半径为 3 个单位。阴影将与文本水平偏移 3 个单位,垂直偏移 3 个单位,从而创建视觉上吸引人的阴影效果。
也可以看看
- 有关滤镜原语的更多信息,请参阅 W3C Filter Effects Module。
- 如果您想知道如何编写 SVG 代码来创建 SVG 滤镜、高斯模糊、阴影效果、光照效果或线性渐变和径向渐变,请访问 SVG 滤镜和渐变 文章。
- 您可以从 GitHub下载完整的示例和数据文件。
- 关于从 GitHub 下载并运行示例,您可以在 如何运行示例 部分找到。