Helpful resources ▼
  Download   Pricing   Buy

投影 – SVG 滤镜 – C# 代码

SVG 滤镜 – SVG Filters

Aspose.SVG for .NET 允许您打开、创建或编辑 SVG 文档并更改其内容。您可以对 SVG 元素或位图应用许多可用的 SVG 过滤器以获得所需的结果。 Aspose.Svg.Filters 命名空间包含 SVG 规范中与滤镜效果相关的类和接口。要创建投影效果，您可以使用一些滤镜基元：

在本文中，您将学习如何编写 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)：

  1. <feOffset> 过滤器原语用于偏移 SVG 中的图层。它采用 in="SourceAlpha"，将结果向右移动 10 像素，向下移动 10 像素，并将结果作为“偏移”存储在缓冲区中。请注意，形状的 Alpha 通道用作输入。值 SourceAlpha 会产生黑色结果(图 a)。
  2. <feGaussianBlur> 采用 in="offset"，应用 stdDeviation="3" 的模糊，并将结果存储在名为 "blur" 的临时缓冲区中。
  3. <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 创建投影效果。

  1. 使用 SVGDocument() 构造函数创建一个空的 SVG 文档。
  2. SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
  3. 创建一个 <defs> 元素并将其添加到 <svg> 元素：
  4. 创建一个 <filter> 元素，设置属性，并将其添加到 <defs> 元素中：
  5. 创建一个<feOffset>元素，设置属性，并将其添加到<filter>元素：
    • 使用 SVGDocument 类的 CreateElementNS() 方法创建 SVGFEOffsetElement 类的实例。
    • 调用 SetAttribute(name, value) 方法设置 dx、dy 和 result 属性。
    • 不要忘记设置in1属性。使用 SVGAnimatedLength 类型的属性，可以通过构造 feOffsetElement.In1.BaseVal = "SourceAlpha" 来设置或读取其静态数据。
    • 使用 AppendChild() 方法将 <feOffset> 添加到 <filter> 元素。
  6. 以类似的方式创建、设置属性，并向<filter>元素添加 <feGaussianBlur> 和 <feBlend> 等元素。
  7. 创建一个矩形 <rect>元素，该元素将是具有投影效果的 SVG 形状。它被赋予 fill 颜色(#ffa500 – 橙色)，并且 filter 属性设置为 url(#shadow) ，引用先前定义的带有 Id =“shadow”的过滤器。
  8. 调用 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 – 带有黑色阴影的橙色矩形。

使用 SVG Builder API 的投影效果

Aspose.SVG Builder API 旨在简化 C# 中 SVG 元素的创建和更新。 让我们看一个使用 SVG Builder API 实现投影效果的 С# 示例（与上一段中的示例完全相同）。 此代码展示了如何使用 流畅的构建器模式(fluent builder pattern) 创建简洁且可读的 SVG 文档，并利用 Aspose.SVG 库的功能：

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
 9        var svg = new SVGSVGElementBuilder()
10            .Width(400).Height(400)
11            .AddDefs(d => d
12                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
13                    .AddFeDropShadow(sh => sh
14                        .Dx(10).Dy(10)
15                        .StdDeviation(3)
16                    )
17                )
18            )
19            .AddRect(r => r
20                .Rect(40, 40, 100, 100)
21                .Filter(f => f.FilterId("shadow"))
22                .Style(s => s.Fill(Color.Orange))
23            )
24            //Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
25            .Build(document.FirstChild as SVGSVGElement);
26        document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
27    }

流畅的构建器模式允许您以更简洁和可读的方式创建 SVG 元素并应用过滤器。 每个方法调用，例如 .AddFilter或 .AddRect都清楚地说明了其目的，让您一目了然地了解SVG文档的结构。 此示例演示了使用 SVG Builder 创建 SVG 文档的更具表现力的方法，与 上一个示例中显示的手动创建元素的方法相比，提供了更高的可读性、可维护性和灵活性。 代码运行的结果是，我们得到了带有黑色阴影的相同橙色矩形：

Text “橙色矩形的投影效果 – 文件 drop-shadow-builder.svg 的可视化”

文本阴影 – 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    }

文本投影 – 使用 SVG Builder

与带有彩色阴影的文本的示例完全相同，但我们使用 Aspose.SVG Builder 实现它：

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
 9        var svg = new SVGSVGElementBuilder()
10            .AddDefs(d => d
11                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
12                    .AddFeDropShadow(sh => sh
13                        .Dx(3).Dy(3)
14                        .StdDeviation(3)
15                        .FloodColor(Color.LightCoral)
16                    )
17                )
18            )
19            .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
20                .Filter(f => f.FilterId("shadow"))
21                .AddContent("Drop Shadow Effect")
22            )
23            
24            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
25            .Build(document.FirstChild as SVGSVGElement);
26        document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
27    }

生成的 text-drop-shadow.svg 和 text-drop-shadow-builder.svg 图像如下所示：

文本“对文本应用投影效果 – 投影效果”

文本有一个阴影，填充颜色为 LightCoral，模糊半径为 3 个单位。阴影将与文本水平偏移 3 个单位，垂直偏移 3 个单位，从而创建视觉上吸引人的阴影效果。

也可以看看

  • 有关滤镜原语的更多信息，请参阅 W3C Filter Effects Module。
  • 如果您想知道如何编写 SVG 代码来创建 SVG 滤镜、高斯模糊、阴影效果、光照效果或线性渐变和径向渐变，请访问 SVG 滤镜和渐变 文章。
  • 您可以从 GitHub下载完整的示例和数据文件。
  • 关于从 GitHub 下载并运行示例，您可以在 如何运行示例 部分找到。
高斯模糊 SVG 灯光效果
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2024. All Rights Reserved.