Efek Bayangan Jatuh SVG C#

Gambar SVG adalah gambar vektor ramah web yang dapat dicari, diindeks, dikompresi, dan dituliskan. Padahal, bayangan adalah fitur desain umum yang digunakan untuk membuat gambar menarik dan menonjol secara estetis. Terkadang, Anda mungkin perlu menambahkan efek bayangan ke gambar SVG, seperti ikon, atau teks, dll. Karenanya, artikel ini menjelaskan cara membuat efek bayangan pada gambar SVG secara terprogram dalam C#.

Drop Shadow Effect pada Gambar SVG – Unduh Gratis C# API

Aspose.SVG for .NET mendukung bekerja dengan gambar SVG karena menawarkan banyak fitur untuk mengedit, memperbarui, atau mengonversi Scalable Vector Graphics secara terprogram dalam C#. Cukup akses file DLL referensi dari halaman Rilis Baru, atau jalankan perintah NuGet di bawah ini untuk mengonfigurasinya dari galeri NuGet, beserta semua dependensi, jika ada.

PM> Install-Package Aspose.SVG

Cara Membuat Efek Drop Shadow pada Gambar SVG di C#

Langkah-langkah berikut menguraikan seluruh proses penambahan efek bayangan pada gambar SVG:

  1. Buat objek kelas SVGDocument.
  2. Atur Url Namespace SVG dan dapatkan elemen root SVG.
  3. Buat elemen defs dan filterElement untuk menambahkan primitif filter feOffset.
  4. Buat filter feBlend dan elemen teks.
  5. Simpan gambar SVG keluaran dengan efek Drop Shadow dengan memanggil metode Save.

Membuat Efek Drop Shadow pada Gambar SVG Secara Terprogram di C#

Silakan ikuti langkah-langkah di bawah ini untuk membuat efek bayangan pada gambar SVG secara terprogram di C#:

  1. Buat objek dari kelas SVGDocument.
  2. Atur Url Namespace SVG dan dapatkan elemen root SVG.
  3. Buat elemen defs dan filterElement untuk menambahkan primitif filter feOffset.
  4. Buat filter feBlend dan elemen teks.
  5. Simpan gambar SVG keluaran dengan efek Drop Shadow dengan memanggil metode Save.

Cuplikan kode di bawah ini menunjukkan cara membuat efek bayangan pada gambar SVG di C#:

// Inisialisasi objek kelas SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Setel Url Ruang Nama SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Dapatkan elemen root svg dari dokumen
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Buat elemen defs dan tambahkan ke svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Buat elemen filter dan tambahkan ke 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);

// Buat primitif filter feOffset dan tambahkan ke 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);

//// Buat filter primitif feGaussianBlur dan tambahkan ke filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "offset";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("hasil", "blur");
//filterElement.AppendChild(feGaussianBlurElement);

// Buat filter primitif feBlend dan tambahkan ke 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);

// Buat elemen teks dan tambahkan ke 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);

// Simpan dokumen SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Harap perhatikan bahwa beberapa baris kode dikomentari dalam cuplikan kode di atas. Anda dapat memilih untuk menghapus tanda komentar untuk menerapkan efek Gaussian blur pada bayangan jika Anda lebih suka efek bayangan buram yang membuat keluaran menonjol dengan bayangan yang lebih halus.

Dapatkan Lisensi Sementara Gratis

Anda dapat meminta lisensi sementara gratis untuk menguji API hingga kapasitas penuhnya.

Kesimpulan

Pada artikel ini, Anda telah mempelajari cara membuat efek bayangan pada gambar SVG secara terprogram dalam C#. Anda dapat memproses gambar SVG yang ada dengan memuatnya atau membuat gambar SVG baru dari awal tergantung kebutuhan Anda. Selanjutnya, Anda dapat mengunjungi bagian dokumentasi untuk mempelajari banyak fitur API lainnya. Jika Anda perlu mendiskusikan pertanyaan atau masalah apa pun dengan kami, jangan ragu untuk menghubungi kami melalui forum.

Lihat juga