投影效果 SVG C#

SVG 图像是网络友好的矢量图像,可以搜索、索引、压缩和编写脚本。然而,阴影是一种常见的设计特征,用于使图像具有美学吸引力和突出性。有时,您可能需要为 SVG 图像添加投影效果,例如图标或文本等。因此,本文介绍了如何在 C# 中以编程方式在 SVG 图像上创建投影效果。

SVG 图像上的投影效果 – C# API 免费下载

Aspose.SVG for .NET 支持处理 SVG 图像,因为它提供了许多功能,可以在 C# 中以编程方式编辑、更新或转换可缩放矢量图形。只需从 New Releases 页面访问参考 DLL 文件,或运行下面的 NuGet 命令以从 NuGet 库配置它,以及所有依赖项(如果有)。

PM> Install-Package Aspose.SVG

如何在 C# 中对 SVG 图像创建投影效果

以下步骤概述了在 SVG 图像上添加阴影效果的整个过程:

  1. 创建 SVGDocument 类的对象。
  2. 设置 SVG 命名空间 Url 并获取根 SVG 元素。
  3. 创建 defs 元素和 filterElement 以附加 feOffset 过滤器原语。
  4. 创建一个 feBlend 过滤器和一个文本元素。
  5. 通过调用 Save 方法保存带有投影效果的输出 SVG 图像。

在 C# 中以编程方式在 SVG 图像上创建投影效果

请按照以下步骤在 C# 中以编程方式在 SVG 图像上创建投影效果:

  1. 创建 SVGDocument 类的对象。
  2. 设置 SVG 命名空间 Url 并获取根 SVG 元素。
  3. 创建 defs 元素和 filterElement 以附加 feOffset 过滤器原语。
  4. 创建一个 feBlend 过滤器和一个文本元素。
  5. 通过调用 Save 方法保存带有投影效果的输出 SVG 图像。

下面的代码片段展示了如何在 C# 中对 SVG 图像创建投影效果:

// 初始化 SVGDocument 类的对象
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// 设置 SVG 命名空间 URL
string SvgNamespace = "http://www.w3.org/2000/svg";

// 获取文档的根 svg 元素
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// 创建一个 defs 元素并添加到 svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// 创建一个过滤器元素并添加到 defsElement
var filterElement = (Aspose.Svg.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);

// 创建一个 feOffset 过滤器原语并添加到 filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// 创建一个 feGaussianBlur 过滤器原语并添加到 filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "偏移";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("result", "blur");
//filterElement.AppendChild(feGaussianBlurElement);

// 创建一个 feBlend 过滤器原语并添加到 filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// 创建一个文本元素并添加到 svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// 保存 SVG 文档
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

请注意,上面的代码片段中有几行代码被注释掉了。如果您更喜欢模糊阴影效果,可以选择取消注释它以在阴影上应用高斯模糊效果,从而使输出以更平滑的阴影突出。

获得免费临时许可证

您可以申请 免费临时许可证 来测试 API 的全部功能。

结论

在本文中,您学习了如何使用 C# 以编程方式在 SVG 图像上创建投影效果。您可以通过加载现有的 SVG 图像来处理它,或者根据您的要求从头开始创建新的 SVG 图像。此外,您可以访问 documentation 部分以了解 API 的许多其他功能。如果您需要与我们讨论任何疑问或疑虑,请随时通过 论坛 与我们联系。

也可以看看