投影效果 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("結果", "模糊");
//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 圖像。此外,您可以訪問 文檔 部分以了解該 API 的許多其他功能。如果您需要與我們討論任何疑問或疑慮,請隨時通過 論壇 與我們聯繫。

也可以看看