Fill và Stroke trong SVG bằng C#

điền và đột quỵ trong svg bằng cách sử dụng csharp

SVG(Đồ họa Vectơ có thể mở rộng) là định dạng tệp vectơ thân thiện với web dựa trên XML. Nó được sử dụng để hiển thị thông tin trực quan trên một trang web. Hình ảnh SVG có thể mở rộng mà không làm thay đổi chất lượng của hình ảnh. Trong bài viết này, chúng ta sẽ học cách làm việc với tô và nét trong SVG bằng cách sử dụng C#.

Các chủ đề sau sẽ được đề cập trong bài viết này:

C# API để điền và tạo nét trong SVG
Điền SVG là gì
SVG Stroke là gì
Strokes and Fills trong SVG
Tô và Stroke Circle trong SVG
Fill và Stroke Path trong SVG
Áp dụng Tô màu và Tạo nét bằng cách sử dụng Kiểu

API C# để tô và tạo nét trong SVG

Để làm việc với các thuộc tính tô và nét của SVG trong C#, chúng tôi sẽ sử dụng API Aspose.SVG for .NET. Nó cho phép tải, phân tích cú pháp, hiển thị, tạo và chuyển đổi tệp SVG sang các định dạng phổ biến mà không cần bất kỳ phụ thuộc phần mềm nào.

Lớp SVGDocument của API đại diện cho gốc của hệ thống phân cấp SVG và chứa toàn bộ nội dung. Phương thức Save() của lớp này cho phép lưu SVG vào đường dẫn tệp được chỉ định. Phương thức QuerySelector() trả về phần tử đầu tiên trong tài liệu khớp với bộ chọn. API hỗ trợ làm việc với các hình dạng phổ biến như hình chữ nhật, hình tròn, hình elip, Đường thẳng, hình đa giác, v.v. API cung cấp các lớp riêng biệt để đại diện cho các hình dạng được hỗ trợ này, chẳng hạn như SVGCircleElement cho hình tròn, SVGPolygonElement cho đa giác, v.v.

Vui lòng tải xuống DLL của API hoặc cài đặt nó bằng NuGet.

PM> Install-Package Aspose.SVG

SVG Fill là gì?

Thuộc tính tô màu là một trong những thuộc tính trình bày SVG cơ bản được sử dụng để đặt màu của hình bên trong đường viền của nó.

Chúng ta có thể xác định các thuộc tính điền sau:

fill: Đặt màu để tô. Chỉ định không hoặc trong suốt nếu không có điền.
fill-opacity: Đặt giá trị độ mờ từ 0 đến 1.
quy tắc điền: xác định cách xác định khu vực bên trong của một hình dạng, chẳng hạn như nonzero, evenodd.

SVG Stroke là gì?

Thuộc tính stroke xác định đường viền hoặc đường viền của các hình SVG. Thuộc tính trình bày nét vẽ đặt màu cho đường viền của hình dạng.

Chúng ta có thể đặt các thuộc tính nét vẽ sau:

đột quỵ: Đặt giá trị màu.
stroke-dasharray: Chỉ định kiểu đường đứt nét.
đột quỵ-dashoffset
stroke-linecap: Kiểm soát hình dạng của các phần cuối của các đường như mông, vuông và tròn.
stroke-linejoin: Chỉ định cách hai đường nối lại chẳng hạn như miter, bevel và round.
stroke-miterlimit: Phải lớn hơn hoặc bằng 1 nếu được sử dụng.
stroke-opacity: Đặt giá trị độ mờ từ 0 đến 1.
stroke-width: Đặt chiều rộng.

Fills và Strokes trong SVG

Cả tô màu và nét vẽ đều được sử dụng để thêm màu, gradient hoặc mẫu vào đồ họa trong SVG. Màu tô vẽ phần bên trong của phần tử SVG, trong khi nét vẽ sẽ vẽ đường viền của nó. Chúng ta có thể chỉ định cả tô và nét trong thuộc tính style hoặc sử dụng chúng làm thuộc tính trình bày.

Chúng ta có thể đặt điền SVG và nét SVG trong thuộc tính style như hình dưới đây:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Chúng ta cũng có thể sử dụng các thuộc tính kiểu tương tự trong các thuộc tính trình bày như hình dưới đây:

stroke="green" stroke-width="2" fill="#ff0000"

Để chỉ định màu SVG, chúng ta có thể sử dụng các tên màu như đỏ, xanh lam, v.v. Chúng ta cũng có thể sử dụng các giá trị RGB hoặc giá trị HEX cho các màu.

Fill và Stroke Circle trong C#

Chúng ta có thể đặt các thuộc tính tô SVG và nét vẽ SVG cho hình tròn bằng cách làm theo các bước dưới đây:

Đầu tiên, tải một SVG hiện có bằng cách sử dụng lớp SVGDocument.
Tiếp theo, lấy phần tử gốc của tài liệu.
Sau đó, tìm tất cả các phần tử của vòng kết nối bằng phương thức QuerySelectorAll().
Sau đó, đặt thuộc tính điền cho SVGCircleElement đã chọn.
Theo tùy chọn, đặt các thuộc tính đột quỵ cho SVGCircleElement đã chọn.
Cuối cùng, lưu hình ảnh SVG đầu ra bằng phương thức Save().

Mẫu mã sau đây cho thấy cách đặt tô màu và nét vẽ cho một phần tử hình tròn của SVG trong C#.

// Ví dụ mã này trình bày cách đặt các thuộc tính tô và nét cho một phần tử vòng tròn của SVG trong C#.
// Tải hình ảnh SVG hiện có
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Nhận phần tử SVG gốc của tài liệu
var svgElement = document.RootElement;

// Tìm tất cả các phần tử vòng tròn trong phần tử g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Nhận phần tử vòng kết nối đầu tiên
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Đặt thuộc tính điền
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Đặt thuộc tính nét vẽ
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Lưu SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Fill-and-Stroke-Circle-in-CSharp — Đặt tô và nét cho phần tử hình tròn trong C#.

Vui lòng tìm bên dưới nội dung của hình ảnh Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Đây là nội dung của hình ảnh Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Fill và Stroke Path trong C#

Chúng ta có thể đặt các thuộc tính tô SVG và nét vẽ SVG cho phần tử đường dẫn trong SVG bằng cách làm theo các bước dưới đây:

Đầu tiên, tải một SVG hiện có bằng cách sử dụng lớp SVGDocument.
Tiếp theo, lấy phần tử gốc của tài liệu.
Sau đó, lấy phần tử đường dẫn bằng phương thức QuerySelector().
Sau đó, đặt thuộc tính điền cho SVGPathElement đã chọn.
Theo tùy chọn, đặt các thuộc tính đột quỵ cho SVGPathElement đã chọn.
Cuối cùng, lưu hình ảnh SVG đầu ra bằng phương thức Save().

Mẫu mã sau đây cho thấy cách đặt tô màu và nét vẽ cho một phần tử đường dẫn của SVG trong C#.

// Ví dụ mã này trình bày cách đặt các thuộc tính tô và nét cho một phần tử đường dẫn của SVG trong C#.
// Tải hình ảnh SVG hiện có
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Nhận phần tử SVG gốc của tài liệu
var svgElement = document.RootElement;

// Lấy phần tử đường dẫn đầu tiên
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Đặt thuộc tính điền
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Đặt thuộc tính nét vẽ
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Lưu SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Fill-and-Stroke-Path-in-CSharp — Đặt tô màu và nét vẽ cho phần tử đường dẫn trong C#.

Vui lòng tìm bên dưới nội dung của hình ảnh Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Vui lòng tìm nội dung của hình ảnh Fill-Path.svg bên dưới.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Áp dụng Fill và Stroke bằng cách sử dụng Style trong C#

Chúng tôi cũng có thể áp dụng thuộc tính tô SVG và nét vẽ SVG bằng cách sử dụng thuộc tính kiểu CSS bằng cách làm theo các bước được đưa ra bên dưới:

Đầu tiên, tạo một thể hiện của lớp SVGDocument.
Tiếp theo, lấy phần tử gốc của tài liệu.
Sau đó, tạo một phần tử vòng kết nối bằng phương thức CreateElementNS().
Tiếp theo, thiết lập các thuộc tính cơ bản của vòng tròn như Cx, Cy và R.
Sau đó, áp dụng thuộc tính style bằng phương thức SetAttribute().
Sau đó, nối con bằng phương thức AppendChild().
Cuối cùng, lưu hình ảnh SVG đầu ra bằng phương thức Save().

Mẫu mã sau đây cho thấy cách áp dụng tô và nét bằng cách sử dụng kiểu CSS trong C#.

// Ví dụ mã này trình bày cách áp dụng các thuộc tính tô và nét bằng cách sử dụng kiểu CSS trong C#.
// Tạo SVG mới
using (var document = new SVGDocument())
{
    // Nhận phần tử SVG gốc của tài liệu
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Thêm vòng kết nối
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Đặt thuộc tính kiểu
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Thêm vòng kết nối vào phần tử gốc
    svgElement.AppendChild(circle);
    
    // Lưu SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

Apply-Fill-and-Stroke-using-Style-in-CSharp — Áp dụng tô màu và nét vẽ bằng cách sử dụng kiểu CSS

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Nhận Giấy phép Tạm thời Miễn phí

Bạn có thể nhận giấy phép tạm thời miễn phí để dùng thử Aspose.SVG cho .NET mà không có giới hạn đánh giá.

Sự kết luận

Trong bài viết này, chúng tôi đã học cách:

tạo một ảnh SVG mới;
tải hình ảnh SVG hiện có;
chỉnh sửa hình ảnh SVG;
thiết lập các thuộc tính tô và nét cho các hình dạng của SVG;
thiết lập các thuộc tính kiểu dáng cho các hình dạng trong C#.

Bên cạnh đó, bạn có thể tìm hiểu thêm về Aspose.SVG cho .NET trong tài liệu và khám phá các tính năng khác nhau được API hỗ trợ. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn của chúng tôi.

Xem thêm

Thay đổi màu hoặc nền SVG theo chương trình trong C#

API C# để tô và tạo nét trong SVG#

SVG Fill là gì?#

SVG Stroke là gì?#

Fills và Strokes trong SVG#

Fill và Stroke Circle trong C##

Fill và Stroke Path trong C##

Áp dụng Fill và Stroke bằng cách sử dụng Style trong C##

Nhận Giấy phép Tạm thời Miễn phí#

Sự kết luận#

Xem thêm#