Chuyển đổi văn bản sang SVG trong C#

Phần tử SVG Text được sử dụng để xác định một văn bản trong SVG. SVG (Scalable Vector Graphics) là một định dạng tệp vectơ thân thiện với web. Nó được sử dụng để hiển thị thông tin trực quan trên một trang web. Chúng ta có thể dễ dàng viết bất kỳ văn bản nào trong SVG bằng cách sử dụng phần tử SVG Text. Trong bài viết này, chúng ta sẽ tìm hiểu cách chuyển đổi văn bản sang SVG trong C#.

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

1. API C# để chuyển đổi văn bản thành SVG
2. Văn bản SVG là gì
3. Chuyển đổi văn bản thành SVG
4. Chuyển đổi văn bản bằng TSpan sang SVG
5. Văn bản SVG với TextPath
6. Áp dụng kiểu văn bản SVG

C# API để chuyển đổi văn bản thành SVG

Để chuyển đổi văn bản thành SVG, 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. Chúng ta có phương thức Save() trong lớp này cho phép lưu SVG vào đường dẫn tệp được chỉ định. Lớp SVGTextElement đại diện cho phần tử ‘văn bản’. Giao diện SVGTSpanElement tương ứng với phần tử ’tspan’. API cung cấp lớp SVGTextPathElement đại diện cho phần tử ’textPath’ và SVGPathElement cho phần tử ‘đường dẫn’. Chúng ta có thể đặt các thuộc tính / thuộc tính khác nhau cho các phần tử SVG bằng phương thức SetAttribute (string, string). Phương thức AppendChild (Node) của API thêm phần tử con mới của nút vào cuối danh sách các phần tử con của [nút] này 18.

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 Text là gì?

Trong SVG, văn bản được hiển thị bằng phần tử . Theo mặc định, Văn bản được hiển thị với màu đen và không có đường viền. Chúng ta có thể xác định các thuộc tính sau:

• x: đặt vị trí của điểm theo chiều ngang.
• y: đặt vị trí của điểm theo phương thẳng đứng.
• fill: xác định màu văn bản được hiển thị.
• biến đổi: xoay, dịch, xiên và chia tỷ lệ.

Chuyển đổi văn bản sang SVG bằng C#

Chúng tôi có thể thêm bất kỳ văn bản nào vào SVG bằng cách làm theo các bước dưới đây:

1. Đầu tiên, tạo một thể hiện của lớp SVGDocument.
2. Tiếp theo, lấy phần tử gốc của tài liệu.
3. Sau đó, tạo đối tượng lớp SVGTextElement.
4. Tiếp theo, đặt các thuộc tính khác nhau bằng phương thức SetAttribute().
5. Sau đó, gọi phương thức AppendChild() để nối nó vào phần tử gốc.
6. 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 chuyển đổi văn bản thành SVG trong C#.

// Ví dụ mã này trình bày cách thêm văn bản vào SVG.
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";

// Xác định phần tử Văn bản SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Xác định văn bản để hiển thị
text.TextContent = "The is a simple SVG text!";

// Đặt các thuộc tính khác nhau
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Nối văn bản vào thư mục gốc
svgElement.AppendChild(text);

// Lưu dưới dạng SVG
document.Save(@"C:\Files\simple-text.svg");

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Chuyển đổi văn bản bằng TSpan sang SVG trong C#

Phần tử SVG xác định một văn bản con trong phần tử . Chúng tôi có thể thêm bất kỳ văn bản nào có phần tử tspan vào SVG bằng cách làm theo các bước dưới đây:

1. Đầu tiên, tạo một thể hiện của lớp SVGDocument.
2. Tiếp theo, lấy phần tử gốc của tài liệu.
3. Sau đó, tạo đối tượng lớp SVGTextElement.
4. Theo tùy chọn, đặt các thuộc tính khác nhau bằng phương thức SetAttribute().
5. Tiếp theo, xác định đối tượng SVGTSpanElement.
6. Sau đó, đặt các thuộc tính của nó bằng phương thức SetAttribute().
7. Bây giờ, hãy gọi phương thức AppendChild() để thêm nó vào phần tử SVGTextElement.
8. Lặp lại các bước trên để thêm nhiều đối tượng SVGTSpanElement hơn.
9. Sau đó, gọi phương thức AppendChild() để nối SVGTextElement vào phần tử gốc.
10. 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 chuyển đổi văn bản bằng tspan sang SVG trong C#.

// Ví dụ mã này trình bày cách thêm văn bản bằng tspan vào SVG.
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";

// Phần tử văn bản SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// Phần tử SVG TSpan
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// Thêm vào Văn bản SVG
text.AppendChild(tspan1);

// Một phần tử TSpan khác
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// Nối vào Văn bản SVG
text.AppendChild(tspan2);

// Nối Văn bản SVG vào thư mục gốc
svgElement.AppendChild(text);

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

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

Văn bản SVG với TextPath trong C#

Chúng ta cũng có thể kết xuất văn bản dọc theo hình dạng của phần tử và bao bọc văn bản trong phần tử . Nó cho phép thiết lập một tham chiếu đến phần tử bằng cách sử dụng thuộc tính href. Chúng tôi có thể chuyển đổi văn bản bằng các đường dẫn văn bản bằng cách làm theo các bước dưới đây:

1. Đầu tiên, tạo một thể hiện của lớp SVGDocument.
2. Tiếp theo, lấy phần tử gốc của tài liệu.
3. Sau đó, tạo đối tượng lớp SVGPathElement và đặt các thuộc tính khác nhau bằng phương thức SetAttribute().
4. Sau đó, gọi phương thức AppendChild() để nối nó vào phần tử gốc.
5. Tiếp theo, tạo đối tượng lớp SVGTextElement.
6. Sau đó, khởi tạo đối tượng SVGTextPathElement và đặt nội dung văn bản.
7. Tiếp theo, gán SVGPathElement cho thuộc tính href của nó bằng phương thức SetAttribute().
8. Sau đó, gọi phương thức AppendChild() để nối SVGTextPathElement vào phần tử SVGTextElement.
9. Sau đó, nối SVGTextElement vào phần tử gốc bằng phương thức AppendChild().
10. 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 chuyển đổi văn bản bằng textPath thành SVG trong C#.

// Ví dụ mã này trình bày cách thêm văn bản bằng textPath vào SVG.
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";

// Phần tử đường dẫn SVG
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// Nối đường dẫn SVG vào phần tử gốc
svgElement.AppendChild(path1);

// Another Phần tử đường dẫn SVG
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// Nối đường dẫn SVG vào phần tử gốc
svgElement.AppendChild(path2);

// Phần tử văn bản SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Tạo phần tử Đường dẫn Văn bản SVG
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// Nối đường dẫn văn bản SVG vào văn bản SVG
text.AppendChild(textPath1);

// Một phần tử Đường dẫn Văn bản SVG khác
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// Nối đường dẫn văn bản SVG vào văn bản SVG
text.AppendChild(textPath2);

// Nối Văn bản SVG vào thư mục gốc
svgElement.AppendChild(text);

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

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

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

Áp dụng kiểu văn bản SVG trong C#

Chúng tôi có thể thêm bất kỳ văn bản nào vào SVG bằng cách làm theo các bước dưới đây:

1. Đầu tiên, tạo một thể hiện của lớp SVGDocument.
2. Tiếp theo, lấy phần tử gốc của tài liệu.
3. Sau đó, tạo đối tượng lớp SVGTextElement.
4. Tiếp theo, đặt thuộc tính style bằng phương thức SetAttribute().
5. Sau đó, gọi phương thức AppendChild() để nối nó vào phần tử gốc.
6. 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 kiểu CSS cho văn bản SVG trong C#.

// Ví dụ mã này trình bày cách thêm văn bản vào SVG và áp dụng các thuộc tính kiểu CSS.
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";

// Xác định phần tử Văn bản SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Xác định văn bản để hiển thị
text.TextContent = "The is a simple SVG text!";

// Đặt các thuộc tính khác nhau
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Áp dụng phong cách
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// Nối văn bản vào thư mục gốc
svgElement.AppendChild(text);

// Lưu dưới dạng SVG
document.Save(@"C:\Files\text-style.svg");

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

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</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;
• sử dụng các phần tử văn bản SVG;
• kết xuất văn bản SVG đến đường dẫn;
• đặt vị trí và điền các thuộc tính cho văn bản SVG;
• đặt thuộc tính kiểu cho văn bản SVG trong C#.

Bên cạnh việc chuyển đổi văn bản sang SVG trong C#, 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 hỗ trợ miễn phí của chúng tôi.

Xem thêm

• Fill và Stroke trong SVG bằng C#