ドロップ シャドウ効果 SVG C#

SVG 画像は、検索、インデックス作成、圧縮、およびスクリプト作成が可能な Web フレンドリーなベクター画像です。一方、影は、画像を美的に魅力的で目立つようにするために使用される一般的なデザイン機能です。場合によっては、アイコンやテキストなどのドロップ シャドウ効果を SVG 画像に追加する必要がある場合があります。したがって、この記事では、C# でプログラムによって SVG 画像にドロップ シャドウ効果を作成する方法について説明します。

SVG 画像のドロップ シャドウ効果 – C# API 無料ダウンロード

Aspose.SVG for .NET は、C# でプログラムによってスケーラブル ベクター グラフィックスを編集、更新、または変換するための多くの機能を提供するため、SVG イメージの操作をサポートします。 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 の他の多くの機能を学習することもできます。ご質問やご不明な点がございましたら、フォーラム からお気軽にお問い合わせください。

関連項目