แปลงข้อความเป็น SVG ใน C#

องค์ประกอบข้อความ SVG ใช้เพื่อกำหนดข้อความใน SVG SVG (Scalable Vector Graphics) เป็นรูปแบบไฟล์เวกเตอร์ที่เหมาะกับเว็บ ใช้เพื่อแสดงข้อมูลภาพบนเว็บเพจ เราสามารถเขียนข้อความใด ๆ ใน SVG โดยใช้องค์ประกอบข้อความ SVG ในบทความนี้ เราจะเรียนรู้วิธีแปลงข้อความเป็น SVG ใน C#

หัวข้อต่อไปนี้จะครอบคลุมในบทความนี้:

1. C# API เพื่อแปลงข้อความเป็น SVG
2. ข้อความ SVG คืออะไร
3. แปลงข้อความเป็น SVG
4. แปลงข้อความด้วย TSpan เป็น SVG
5. ข้อความ SVG พร้อม TextPath
6. ใช้รูปแบบข้อความ SVG

C # API เพื่อแปลงข้อความเป็น SVG

ในการแปลงข้อความเป็น SVG เราจะใช้ API ของ Aspose.SVG for .NET อนุญาตให้โหลด แยกวิเคราะห์ เรนเดอร์ สร้าง และแปลงไฟล์ SVG เป็น รูปแบบยอดนิยม โดยไม่ต้องพึ่งพาซอฟต์แวร์ใดๆ

คลาส SVGDocument ของ API แสดงถึงรากของลำดับชั้น SVG และเก็บเนื้อหาทั้งหมด เรามีเมธอด Save() ในคลาสนี้ที่อนุญาตให้บันทึก SVG ไปยังเส้นทางไฟล์ที่ระบุ คลาส SVGTextElement แสดงถึงองค์ประกอบ ‘ข้อความ’ อินเทอร์เฟซ SVGTSpanElement สอดคล้องกับองค์ประกอบ ’tspan’ API จัดเตรียมคลาส SVGTextPathElement ที่เป็นตัวแทนขององค์ประกอบ ’textPath’ และ SVGPathElement สำหรับองค์ประกอบ ‘เส้นทาง’ เราสามารถตั้งค่าคุณสมบัติ/คุณสมบัติต่างๆ สำหรับองค์ประกอบ SVG โดยใช้เมธอด SetAttribute(string, string) เมธอด AppendChild(Node) ของ API จะเพิ่มลูกใหม่ของโหนดต่อท้ายรายการลูกของ node นี้

โปรด ดาวน์โหลด DLL ของ API หรือติดตั้งโดยใช้ NuGet

PM> Install-Package Aspose.SVG

ข้อความ SVG คืออะไร

ใน SVG ข้อความจะแสดงโดยใช้องค์ประกอบ ตามค่าเริ่มต้น ข้อความจะแสดงด้วยสีดำและไม่มีโครงร่าง เราสามารถกำหนดแอตทริบิวต์ได้ดังนี้

• x: กำหนดตำแหน่งของจุดในแนวนอน
• y: กำหนดตำแหน่งของจุดในแนวตั้ง
• เติม: กำหนดสีข้อความที่แสดงผล
• แปลงร่าง : หมุน แปล เอียง และปรับขนาด

แปลงข้อความเป็น SVG โดยใช้ C#

เราสามารถเพิ่มข้อความใด ๆ ลงใน SVG โดยทำตามขั้นตอนด้านล่าง:

1. ขั้นแรก สร้างอินสแตนซ์ของคลาส SVGDocument
2. ถัดไป รับองค์ประกอบรากของเอกสาร
3. จากนั้นสร้างวัตถุคลาส SVGTextElement
4. ถัดไป ตั้งค่าแอตทริบิวต์ต่างๆ โดยใช้เมธอด SetAttribute()
5. หลังจากนั้นให้เรียกใช้เมธอด AppendChild() เพื่อผนวกเข้ากับองค์ประกอบรูท
6. สุดท้าย บันทึกภาพ SVG เอาต์พุตโดยใช้เมธอด Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแปลงข้อความเป็น SVG ใน C#

// ตัวอย่างรหัสนี้สาธิตวิธีการเพิ่มข้อความใน SVG
var document = new SVGDocument();

// รับรูทองค์ประกอบ svg ของเอกสาร
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// กำหนดองค์ประกอบข้อความ SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// กำหนดข้อความที่จะแสดง
text.TextContent = "The is a simple SVG text!";

// ตั้งค่าแอตทริบิวต์ต่างๆ
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// เพิ่มข้อความต่อท้ายราก
svgElement.AppendChild(text);

// บันทึกเป็น SVG
document.Save(@"C:\Files\simple-text.svg");

โปรดดูเนื้อหาด้านล่างของภาพ simple-text.svg

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

แปลงข้อความด้วย TSpan เป็น SVG ใน C#

องค์ประกอบ SVG กำหนดข้อความย่อยภายในองค์ประกอบ เราสามารถเพิ่มข้อความที่มีองค์ประกอบ tspan ไปยัง SVG โดยทำตามขั้นตอนด้านล่าง:

1. ขั้นแรก สร้างอินสแตนซ์ของคลาส SVGDocument
2. ถัดไป รับองค์ประกอบรากของเอกสาร
3. จากนั้นสร้างวัตถุคลาส SVGTextElement
4. หรือตั้งค่าแอตทริบิวต์ต่างๆ โดยใช้เมธอด SetAttribute()
5. ถัดไป กำหนดวัตถุ SVGTSpanElement
6. จากนั้นตั้งค่าแอตทริบิวต์โดยใช้เมธอด SetAttribute()
7. ตอนนี้ เรียกใช้เมธอด AppendChild() เพื่อต่อท้ายองค์ประกอบ SVGTextElement
8. ทำซ้ำขั้นตอนข้างต้นเพื่อเพิ่มวัตถุ SVGTSpanElement เพิ่มเติม
9. หลังจากนั้น ให้เรียกใช้เมธอด AppendChild() เพื่อผนวก SVGTextElement เข้ากับองค์ประกอบรูท
10. สุดท้าย บันทึกภาพ SVG เอาต์พุตโดยใช้เมธอด Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแปลงข้อความด้วย tspan เป็น SVG ใน C#

// ตัวอย่างโค้ดนี้สาธิตวิธีการเพิ่มข้อความด้วย tspan ใน SVG
var document = new SVGDocument();

// รับรูทองค์ประกอบ svg ของเอกสาร
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// องค์ประกอบข้อความ SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// องค์ประกอบ 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");

// ผนวกกับข้อความ SVG
text.AppendChild(tspan1);

// องค์ประกอบ TSpan อื่น
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");

// ต่อท้ายข้อความ SVG
text.AppendChild(tspan2);

// ต่อท้ายข้อความ SVG เพื่อรูท
svgElement.AppendChild(text);

// บันทึก SVG
document.Save(@"C:\Files\svg-tSpan.svg");

โปรดดูเนื้อหาด้านล่างของภาพ svg-tspan.svg

<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>

ข้อความ SVG พร้อม TextPath ใน C#

เรายังสามารถแสดงข้อความตามรูปร่างขององค์ประกอบ และล้อมรอบข้อความในองค์ประกอบ อนุญาตให้ตั้งค่าการอ้างอิงไปยังองค์ประกอบ โดยใช้แอตทริบิวต์ href เราสามารถแปลงข้อความด้วยเส้นทางข้อความโดยทำตามขั้นตอนด้านล่าง:

1. ขั้นแรก สร้างอินสแตนซ์ของคลาส SVGDocument
2. ถัดไป รับองค์ประกอบรากของเอกสาร
3. จากนั้นสร้างวัตถุคลาส SVGPathElement และตั้งค่าแอตทริบิวต์ต่างๆ โดยใช้เมธอด SetAttribute()
4. หลังจากนั้นให้เรียกใช้เมธอด AppendChild() เพื่อผนวกเข้ากับองค์ประกอบรูท
5. จากนั้น สร้างวัตถุคลาส SVGTextElement
6. จากนั้น เริ่มต้นวัตถุ SVGTextPathElement และตั้งค่าเนื้อหาข้อความ
7. ถัดไป กำหนด SVGPathElement ให้กับแอตทริบิวต์ href โดยใช้เมธอด SetAttribute()
8. จากนั้น เรียกใช้เมธอด AppendChild() เพื่อผนวก SVGTextPathElement เข้ากับองค์ประกอบ SVGTextElement
9. หลังจากนั้น ให้ผนวก SVGTextElement เข้ากับองค์ประกอบรูทโดยใช้เมธอด AppendChild()
10. สุดท้าย บันทึกภาพ SVG เอาต์พุตโดยใช้เมธอด Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแปลงข้อความด้วย textPath เป็น SVG ใน C#

// ตัวอย่างโค้ดนี้สาธิตวิธีการเพิ่มข้อความด้วย textPath ไปยัง SVG
var document = new SVGDocument();

// รับรูทองค์ประกอบ svg ของเอกสาร
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// องค์ประกอบเส้นทาง 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");

// ผนวกเส้นทาง SVG ต่อท้ายองค์ประกอบรูท
svgElement.AppendChild(path1);

// Another องค์ประกอบเส้นทาง 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");

// ผนวกเส้นทาง SVG ต่อท้ายองค์ประกอบรูท
svgElement.AppendChild(path2);

// องค์ประกอบข้อความ SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// สร้างองค์ประกอบเส้นทางข้อความ 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");

// เพิ่มเส้นทางข้อความ SVG ต่อท้ายข้อความ SVG
text.AppendChild(textPath1);

// องค์ประกอบเส้นทางข้อความ SVG อื่น
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");

// เพิ่มเส้นทางข้อความ SVG ต่อท้ายข้อความ SVG
text.AppendChild(textPath2);

// ต่อท้ายข้อความ SVG เพื่อรูท
svgElement.AppendChild(text);

// บันทึก SVG
document.Save(@"C:\Files\svg-textPath.svg");

โปรดดูเนื้อหาด้านล่างของภาพ svg-textPath.svg

<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>

ใช้รูปแบบข้อความ SVG ใน C#

เราสามารถเพิ่มข้อความใด ๆ ลงใน SVG โดยทำตามขั้นตอนด้านล่าง:

1. ขั้นแรก สร้างอินสแตนซ์ของคลาส SVGDocument
2. ถัดไป รับองค์ประกอบรากของเอกสาร
3. จากนั้นสร้างวัตถุคลาส SVGTextElement
4. ถัดไป ตั้งค่าแอตทริบิวต์สไตล์โดยใช้เมธอด SetAttribute()
5. หลังจากนั้นให้เรียกใช้เมธอด AppendChild() เพื่อผนวกเข้ากับองค์ประกอบรูท
6. สุดท้าย บันทึกภาพ SVG เอาต์พุตโดยใช้เมธอด Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้สไตล์ CSS กับข้อความ SVG ใน C#

// ตัวอย่างโค้ดนี้สาธิตวิธีเพิ่มข้อความใน SVG และใช้แอตทริบิวต์สไตล์ CSS
var document = new SVGDocument();

// รับรูทองค์ประกอบ svg ของเอกสาร
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// กำหนดองค์ประกอบข้อความ SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// กำหนดข้อความที่จะแสดง
text.TextContent = "The is a simple SVG text!";

// ตั้งค่าแอตทริบิวต์ต่างๆ
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// ใช้สไตล์
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// เพิ่มข้อความต่อท้ายราก
svgElement.AppendChild(text);

// บันทึกเป็น SVG
document.Save(@"C:\Files\text-style.svg");

โปรดดูเนื้อหาด้านล่างของภาพ text-style.svg

<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>

รับใบอนุญาตชั่วคราวฟรี

คุณสามารถ รับใบอนุญาตชั่วคราวได้ฟรี เพื่อลองใช้ Aspose.SVG for .NET โดยไม่มีข้อจำกัดในการประเมิน

บทสรุป

ในบทความนี้ เราได้เรียนรู้วิธีการ:

• สร้างภาพ SVG ใหม่
• ใช้องค์ประกอบข้อความ SVG;
• แสดงข้อความ SVG เป็นเส้นทาง
• กำหนดตำแหน่งและเติมแอตทริบิวต์สำหรับข้อความ SVG
• ตั้งค่าแอตทริบิวต์สไตล์สำหรับข้อความ SVG ใน C#

นอกจากการแปลงข้อความเป็น SVG ใน C# แล้ว คุณยังสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Aspose.SVG for .NET ได้ใน เอกสารประกอบ และสำรวจคุณสมบัติต่างๆ ที่ API รองรับ ในกรณีที่มีความคลุมเครือ โปรดติดต่อเราได้ที่ ฟอรัมสนับสนุนฟรี

ดูสิ่งนี้ด้วย

• เติมและลากเส้นใน SVG โดยใช้ C#