高斯模糊 – SVG 滤镜 – C# 代码

SVG 滤镜

Aspose.SVG for .NET 允许您打开或创建、编辑 SVG 文档并更改其内容。您可以修改文档，包括应用许多可用的过滤器来获得所需的结果。 Aspose.Svg.Filters 命名空间包含 SVG 规范中与滤镜效果相关的类和接口。 SVGFEGaussianBlurElement 类对应于 <feGaussianBlur>元素来实现高斯模糊效果。

在 SVG 中，过滤器由 <filter>元素定义，该元素在 <defs>元素内设置。它永远不会自行渲染，并且在概念上被描述为包含其子元素(过滤器基元)的元素。 <filter> 元素有一组属性。过滤器基元所需的属性是x、y、width、height和id。他们设置将应用滤镜的图片区域。属性id为 SVG 元素提供唯一标识符，并标识 SVG 文档中的元素。

在本文中，您将学习如何编写 SVG 代码来创建高斯模糊滤镜，并考虑使用 SVGFEGaussianBlurElement 类将高斯模糊效果应用于 SVG 元素和位图的详细 C# 示例。

高斯模糊 – Gaussian Blur – SVG 代码

高斯模糊 SVG 滤镜是一​​种使用高斯分布将模糊效果应用于 SVG 元素内容的滤镜。这是 SVG 中最常用的滤镜之一，可创建柔和、平滑且具有视觉吸引力的效果。 <feGaussianBlur> 滤镜创建柔和的模糊效果。 stdDeviation 属性指定表征模糊操作的标准偏差的数字。如果提供两个数字，第一个 数字 表示沿坐标系 x 轴的标准偏差值，第二个数字表示 y 轴上的标准偏差值。每个过滤器都需要一个源图像来处理。否则，过滤器将没有任何内容可渲染，因此无法工作。过滤器原语的输入数据在 in属性中指定。默认为 in="SourceGraphic"。

以下是将具有各种 stdDeviation属性值的高斯模糊 SVG 过滤器应用于 SVG 矩形元素的示例：

<svg height="150" width="750" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
		<filter id="f4" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
		<filter id="f5" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <g fill="#ffa500">
        <rect x="40" y="40" width="60" height="60" />
        <rect x="40" y="40" width="60" height="60" transform="translate(120)" filter="url(#f1)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(240)" filter="url(#f2)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(360)" filter="url(#f3)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(480)" filter="url(#f4)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(600)" filter="url(#f5)" />
    </g>
</svg>

如您所见，stdDeviation值控制高斯分布的扩展。较大的stdDeviation值会导致更加模糊，而较小的值会产生更柔和的效果。 注意： 在形状周围添加的模糊通常会使输出图片比源图片大。我们需要对x和y使用负数，以避免剪切过滤器添加的图形。在上面的示例中，我们使用 x="-20" 和 y="-20"。

高斯模糊 – C# 代码

在前面的 SVG 代码示例中，我们详细讨论了如何创建高斯模糊滤镜，现在我们知道要使用哪些元素和属性。让我们使用 Aspose.SVG for .NET API 创建 C# 代码来实现此类过滤器。

根据 SVG 语法， <filter>元素应位于 <defs>元素中，而 <feGaussianBlur>滤镜基元仅位于 <filter>元素内部。因此，要对 SVG 滤镜进行编程，您必须正确创建和嵌套所需的元素。

1. 如果您从头开始创建 SVG 文档，请使用 SVGDocument() 构造函数创建一个空的 SVG 文档。
2. SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
3. 创建一个 <rect>元素，设置所需的属性，并将其添加到 <svg>元素中。
   • 使用 SVGDocument 类的 CreateElementNS(namespaceURI, qualifiedName) 方法创建 SVGRectElement 的实例。
   • 设置属性值的一种选择是使用 SetAttribute(name, value) 方法。另一种方法是使用 SVGAnimatedLength 类型的属性来采用 SVG DOM 点访问器方法，可以通过构造 element.X.BaseVal.Value来设置或读取其静态数据。
   • 使用 AppendChild() 方法将 <rect> 元素添加到 <svg> 元素。
4. 同样，创建一个 <defs>元素并将其添加到 <svg>元素中。
5. 要创建 <filter>元素，请使用相同的算法：使用 CreateElementNS() 方法创建 SVGFilterElement 的实例。请记住使用 SetAttribute() 方法设置x、y、height、width和id属性，并将 <filter>添加到 <defs>元素。
6. 创建一个 <feGaussianBlur>元素并设置 in和 stdDeviation属性。然后将其添加到 <filter>元素中。
   • 使用 CreateElementNS() 方法创建 SVGFEGaussianBlurElement 类的实例。
   • 要设置In1属性，请使用SVGAnimatedLength类型的属性，可以通过构造feGaussianBlurElement.In1.BaseVal = "SourceGraphic"来设置或读取其静态数据。
   • 使用 SVGFEGaussianBlurElement 类的 StdDeviationX 和 StdDeviationY 属性来设置 setDerivation 属性。
   • 调用 AppendChild() 方法将 <feGaussianBlur> 添加到 <filter> 元素。
7. 调用 Save()方法将文档保存到path指定的本地文件中。

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

// Apply Gaussian blur filter to a <rect> element 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 <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 = 60;
    rectElement.Height.BaseVal.Value = 60;
    rectElement.SetAttribute("fill", "#ffa500");
    rectElement.SetAttribute("filter", "url(#GaussianBlur)");
    svgElement.AppendChild(rectElement);

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

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

    // Create a feGaussianBlur element and add it to the <filter> element
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
    feGaussianBlurElement.StdDeviationX.BaseVal = 10;
    feGaussianBlurElement.StdDeviationY.BaseVal = 10;
    filterElement.AppendChild(feGaussianBlurElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "gaussian-blur-rect.svg"));
}

如果渲染结果文件，您将看到一个模糊的橙色矩形，与上图中的矩形完全相同，按顺序排列第二个，stdDeviation=“10”。

模糊背景图像

要使用高斯模糊 SVG 滤镜进行背景模糊，您可以将该滤镜应用于充当主要内容后面的背景的 SVG 元素。例如，它可以是任何位图。模糊滤镜可让您创建视觉上吸引人的背景模糊效果，同时保持前景内容清晰且清晰。

要使用 SVG 实现背景图像模糊，请按照以下几个步骤操作。它们与前面的 C# 示例中描述的步骤类似：

1. 创建 SVGDocument 类的实例。
2. SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
3. 您可以使用 SVGDocument 类的 CreateElementNS(namespaceURI, qualifiedName) 方法创建 SVGImageElement、 SVGDefsElement、 SVGFilterElement 的实例，和 SVGFEGaussianBlurElement 类。
   例如，当您计划使用位图作为背景时，请创建 SvgImageElement 类的实例并设置指定其源、位置和大小的属性。要将 imageElement 添加到 svgElement，您可以使用 AppendChild() 方法。使用引用 filterElement 的 url 名称(在id属性中)的 imageElement的 filter属性，可以将 SVG 滤镜效果应用于图像。
4. 将所有必要的属性添加到创建的元素中并正确嵌套它们。
5. 创建模糊滤镜并为 <filter>元素设置 filterElement.Id后，即可将其应用于图像。
6. 调用 Save()方法将带有模糊背景图片的文档保存到path指定的本地文件中。

这是一个说明模糊背景图像实现的示例：

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

// Blur background image using SVG filters in 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 an <image> element and add to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 480;
    imageElement.Width.BaseVal.Value = 640;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#F1)");
    svgElement.AppendChild(imageElement);

    // Create a <defs> element and add it to the <svg> element
    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 = "F1";
    defsElement.AppendChild(filterElement);

    // Create a <feGaussianBlur> element and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
    feGaussianBlurElement.StdDeviationX.BaseVal = 5;
    feGaussianBlurElement.StdDeviationY.BaseVal = 5;
    filterElement.AppendChild(feGaussianBlurElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "blur-background-image.svg"));
}

使用 SVG Builder API 模糊背景图像

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

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

// Blur background image using SVG Builder API in C#

string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
using (SVGDocument document = new SVGDocument(svgContent, "."))
{
    // 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("gaussian-blur")
                .AddFeGaussianBlur(g => g
                .StdDeviation(5, 5)
                )
             )
         )
         .AddImage(i => i
            .X(20).Y(20).Height(480).Width(640)
            .Href("http://docs.aspose.com/svg/images/api/seaside.jpg")
            .Filter(fl => fl
                .FilterId("gaussian-blur")
            )
         )
         // 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, "gaussian-blur-builder.svg"));
}

流畅的构建器模式允许您更简洁、更易读地创建 SVG 元素并应用过滤器。 每个方法调用都清楚地表明其目的，让您一目了然地了解SVG文档的结构。 此示例演示了使用 SVG Builder 创建 SVG 文档的更具表现力的方法，与 上一个示例中显示的手动创建元素的方法相比，提供了更高的可读性、可维护性和灵活性。

也可以看看

• 您可以从 GitHub下载完整的示例和数据文件。
• 关于从 GitHub 下载并运行示例，您可以在 如何运行示例 部分找到。
• 有关滤镜原语的更多信息，请参阅 W3C 滤镜效果模块 页面和 SVG 滤镜和渐变 文章。
• Aspose.SVG 提供免费的 SVG Web 应用程序，用于转换 SVG 或图像文件、合并 SVG、图像矢量化、SVG 精灵生成、SVG 到 Base64 数据编码等。这些在线应用程序可以在任何带有网络浏览器的操作系统上运行，并且不需要安装额外的软件。这是一种快速、简单的方法，可以高效、有效地解决您的 SVG 相关任务！