投影 – 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 滤镜基元

我们认为，最有效的是使用三个滤镜来实现阴影效果。这将允许您微调效果，即使它需要更多代码：

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</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 滤镜基元创建阴影效果：

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

注意： 如果flood-color属性没有指定或者指定不正确，那么默认阴影将为黑色。

投影 – C# 代码

在这里，我们将编写 С# 代码，使用三个滤镜基元为橙色矩形创建阴影效果。

以下代码片段展示了如何使用 Aspose.SVG for .NET API 创建投影效果。

1. 使用 SVGDocument() 构造函数创建一个空的 SVG 文档。
2. SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
3. 创建一个 <defs> 元素并将其添加到 <svg> 元素：
   • 使用 CreateElementNS() 方法创建 SVGDefsElement 类的实例。
   • 使用 AppendChild() 方法将 <defs> 元素添加到 <svg> 元素。
4. 创建一个 <filter> 元素，设置属性，并将其添加到 <defs> 元素中：
   • 使用 SVGDocument 类的 CreateElementNS() 方法创建 SVGFilterElement 类的实例。
   • 调用 SetAttribute(name, value) 方法设置 x, y, height 和 width 属性。
   • 不要忘记设置id属性。
   • 使用 AppendChild() 方法将 <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指定的本地文件中。

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Apply drop shadow effect for an SVG rectangle using C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feOffset> filter primitive and add it to the filterElement
    SVGFEOffsetElement feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
    feOffsetElement.In1.BaseVal = "SourceAlpha";
    feOffsetElement.SetAttribute("result", "offset");
    feOffsetElement.SetAttribute("dx", "10");
    feOffsetElement.SetAttribute("dy", "10");
    filterElement.AppendChild(feOffsetElement);

    // Create a <feGaussianBlur> filter primitive and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "offset";
    feGaussianBlurElement.StdDeviationX.BaseVal = 3;
    feGaussianBlurElement.StdDeviationY.BaseVal = 3;
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a <feBlend> filter primitive and add it to the filterElement
    SVGFEBlendElement feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
    feBlendElement.In1.BaseVal = "SourceGraphic";
    feBlendElement.In2.BaseVal = "blur";
    feBlendElement.SetAttribute("mode", "normal");
    filterElement.AppendChild(feBlendElement);

    // Create a <rect> element and set the "fill" and "filter" attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 40;
    rectElement.Y.BaseVal.Value = 40;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "#ffa500");
    rectElement.SetAttribute("filter", "url(#shadow)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
}

当您运行此 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 库的功能：

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create an SVG <rect> with drop shadow using SVG Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        //.Width(400).Height(400)
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(10).Dy(10)
                    .StdDeviation(3)
                )
            )
        )
        .AddRect(r => r
            .Rect(40, 40, 100, 100)
            .Filter(f => f.FilterId("shadow"))
            .Style(s => s.Fill(Color.Orange))
        )
        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    //.Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
}

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

文本阴影 – Text Drop Shadow

此 C# 示例创建一个 SVG 文件，类似于我们之前在 feDropShadow 滤镜原语 部分中看到的文件。仅在这里，我们使用 feDropShadow 滤镜基元为 SVG 文本(而不是橙色矩形)创建彩色阴影。

以下代码片段展示了如何使用 Aspose.SVG for .NET API 创建文本阴影：

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Add a colored drop shadow effect to <text> in SVG programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "text-shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feDropShadow> filter primitive and add it to the filterElement
    SVGFEDropShadowElement feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
    feDropShadowElement.StdDeviationX.BaseVal = 3;
    feDropShadowElement.StdDeviationY.BaseVal = 3;
    feDropShadowElement.SetAttribute("dx", "3");
    feDropShadowElement.SetAttribute("dy", "3");
    feDropShadowElement.SetAttribute("flood-color", "LightCoral");
    filterElement.AppendChild(feDropShadowElement);

    // Create a <text> element and add it to the svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "4em";
    textElement.SetAttribute("x", "20px");
    textElement.SetAttribute("fill", "CornflowerBlue");
    textElement.SetAttribute("y", "100px");
    textElement.TextContent = "Drop Shadow Effect";
    textElement.SetAttribute("filter", "url(#text-shadow)");
    svgElement.InsertBefore(textElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
}

文本投影 – 使用 SVG Builder

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

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Add a colored drop shadow effect to <text> in SVG using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(3).Dy(3)
                    .StdDeviation(3)
                    .FloodColor(Color.LightCoral)
                )
            )
        )
        .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
            .Filter(f => f.FilterId("shadow"))
            .AddContent("Drop Shadow Effect")
        )

        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
}

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

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

也可以看看

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