Hình ảnh SVG là hình ảnh vectơ thân thiện với web có thể được tìm kiếm, lập chỉ mục, nén và viết tập lệnh. Trong khi đó, bóng đổ là một đặc điểm thiết kế phổ biến được sử dụng để làm cho hình ảnh trở nên hấp dẫn và nổi bật về mặt thẩm mỹ. Đôi khi, bạn có thể cần thêm hiệu ứng đổ bóng vào ảnh SVG, như biểu tượng hoặc văn bản, v.v. Theo đó, bài viết này giải thích cách tạo hiệu ứng đổ bóng trên ảnh SVG theo chương trình trong C#.
- Hiệu ứng bóng đổ trên SVG Image - Tải xuống miễn phí API C#
- Cách tạo hiệu ứng bóng đổ trên ảnh SVG trong C#
- Tạo hiệu ứng bóng đổ trên ảnh SVG theo chương trình trong C#
Hiệu ứng bóng đổ trên SVG Image - Tải xuống miễn phí API C#
Aspose.SVG for .NET hỗ trợ làm việc với ảnh SVG vì nó cung cấp rất nhiều tính năng để chỉnh sửa, cập nhật hoặc chuyển đổi đồ họa vector có thể mở rộng theo chương trình trong C#. Chỉ cần truy cập các tệp DLL tham chiếu từ trang Bản phát hành mới hoặc chạy lệnh NuGet bên dưới để định cấu hình nó từ thư viện NuGet, cùng với tất cả các phụ thuộc, nếu có.
PM> Install-Package Aspose.SVG
Cách tạo hiệu ứng bóng đổ trên ảnh SVG trong C#
Các bước sau đây phác thảo toàn bộ quy trình thêm hiệu ứng đổ bóng vào hình ảnh SVG:
- Tạo một đối tượng của lớp SVGDocument.
- Đặt Url không gian tên SVG và lấy phần tử SVG gốc.
- Tạo phần tử defs và một filterElement để thêm vào nguyên thủy bộ lọc feOffset.
- Tạo một bộ lọc feBlend và một phần tử văn bản.
- Lưu hình ảnh SVG đầu ra với hiệu ứng Drop Shadow bằng cách gọi phương thức Lưu.
Tạo hiệu ứng bóng đổ trên ảnh SVG theo chương trình trong C#
Vui lòng làm theo các bước dưới đây để tạo hiệu ứng đổ bóng trên ảnh SVG theo chương trình trong C#:
- Tạo một đối tượng của lớp SVGDocument.
- Đặt Url không gian tên SVG và lấy phần tử SVG gốc.
- Tạo phần tử defs và một filterElement để thêm vào nguyên thủy bộ lọc feOffset.
- Tạo một bộ lọc feBlend và một phần tử văn bản.
- Lưu hình ảnh SVG đầu ra với hiệu ứng Bóng đổ bằng cách gọi phương thức Lưu.
Đoạn mã dưới đây cho thấy cách tạo hiệu ứng đổ bóng trên hình ảnh SVG trong C#:
// Khởi tạo một đối tượng của lớp SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();
// Đặt Url không gian tên SVG
string SvgNamespace = "http://www.w3.org/2000/svg";
// Nhận phần tử svg gốc của tài liệu
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;
// Tạo một phần tử defs và thêm vào svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);
// Tạo một phần tử bộ lọc và thêm vào 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);
// Tạo một nguyên thủy bộ lọc feOffset và thêm vào 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);
//// Tạo một nguyên thủy bộ lọc feGaussianBlur và thêm vào filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement) document.CreateElementNS (SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "bù đắp";
//feGaussianBlurElement.StdDefiningX.BaseVal = 3;
//feGaussianBlurElement.StdDefiningY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute ("kết quả", "mờ");
//filterElement.AppendChild (feGaussianBlurElement);
// Tạo một nguyên thủy bộ lọc feBlend và thêm vào 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);
// Tạo một phần tử văn bản và thêm vào 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);
// Lưu tài liệu SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));
Xin lưu ý rằng một vài dòng mã được chú thích trong đoạn mã trên. Bạn có thể chọn bỏ ghi chú nó để áp dụng hiệu ứng làm mờ Gaussian trên bóng đổ nếu bạn thích hiệu ứng bóng đổ mờ làm cho đầu ra nổi bật với bóng mờ hơn.
Nhận Giấy phép Tạm thời Miễn phí
Bạn có thể yêu cầu giấy phép tạm thời miễn phí để kiểm tra API ở mức đầy đủ của nó.
Sự kết luận
Trong bài viết này, bạn đã học cách tạo hiệu ứng đổ bóng trên ảnh SVG theo chương trình trong C#. Bạn có thể xử lý ảnh SVG hiện có bằng cách tải nó hoặc tạo ảnh SVG mới từ đầu tùy thuộc vào yêu cầu của bạn. Ngoài ra, bạn có thể truy cập phần tài liệu để tìm hiểu nhiều tính năng khác của API. Nếu bạn cần thảo luận bất kỳ câu hỏi hoặc thắc mắc nào với chúng tôi, vui lòng liên hệ với chúng tôi qua diễn đàn.