แก้ไข SVG ด้วย C#
เรียนรู้วิธีแก้ไข SVG ด้วยการเขียนโค้ด C#
วิธีแก้ไข SVG ด้วย C#
ไลบรารี Aspose.SVG for .NET มีชุดคลาสและเมธอดสำหรับการสร้าง แก้ไข แปลง และจัดการไฟล์ SVG เมื่อตัวเอกสารถูกสร้างขึ้นแล้ว คุณสามารถเติมข้อมูลลงไปได้ด้วยองค์ประกอบ SVG ต่าง ๆ ไม่ว่าจะเป็นรูปทรง ตัวอักษร ฟิลเตอร์ ฯลฯ ในบทความนี้ เราจะแสดงตัวอย่าง C# สองแบบในการสร้างและแก้ไข SVG ได้แก่ การใช้ Aspose.SVG Builder API และการจัดการ DOM โดยตรง
ก่อนอื่น ตรวจสอบให้แน่ใจว่าได้ติดตั้ง Aspose.SVG for .NET API ลงในโปรเจกต์ของคุณแล้ว การติดตั้งทำได้ง่ายมาก โดยใช้ NuGet Package Manager Console ด้วยคำสั่งต่อไปนี้:
ติดตั้ง Aspose.SVG for .NET
Install-Package Aspose.SVG
เพิ่มองค์ประกอบในไฟล์ SVG โดยใช้ Element Builders
Element Builders เป็นคลาสเฉพาะใน Aspose.SVG Builder API ที่ช่วยให้การสร้างและแก้ไของค์ประกอบ SVG ทำได้ง่ายขึ้น โดยมักใช้รูปแบบ Fluent Builder Pattern ซึ่งช่วยให้โค้ดอ่านง่ายและจัดโครงสร้าง SVG ได้อย่างเป็นระบบ ตัวอย่างต่อไปนี้จะแสดงวิธีสร้าง SVG จากศูนย์ด้วย C# โดยใช้ SVGSVGElementBuilder เพื่อสร้างวงกลมพร้อมข้อความ:
โค้ด C# สำหรับแก้ไข SVG ด้วย Element Builders
using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
using (var document = new SVGDocument())
{
// สร้างองค์ประกอบ <svg> พร้อมกำหนดความกว้าง ความสูง และ viewBox แล้วเพิ่มองค์ประกอบอื่น ๆ ลงไป
var svg = new SVGSVGElementBuilder()
.Width(700).Height(300)
.ViewBox(0, 0, 700, 300)
.AddG(g => g
.AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
.AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
)
.Build(document.FirstChild as SVGSVGElement);
// บันทึกเอกสาร
document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
}
เพิ่มองค์ประกอบใน SVG โดยตรง
API ของ Document Object Model (DOM) ช่วยให้คุณควบคุมโหนดและแอตทริบิวต์ของ SVG ได้อย่างสมบูรณ์ และสอดคล้องกับสเปก SVG อย่างเต็มรูปแบบ คุณสามารถเพิ่ม ลบ หรือแก้ไขโหนดได้อย่างอิสระ ตัวอย่างนี้แสดงวิธีเพิ่มวงกลมและข้อความลงใน SVG:
โค้ด C# สำหรับแก้ไข SVG ด้วยการจัดการ DOM โดยตรง
using System.IO;
using Aspose.Html;
...
// กำหนด SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";
using (var document = new SVGDocument())
{
var svgElement = document.RootElement;
// สร้างองค์ประกอบข้อความและกำหนดแอตทริบิวต์
var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "2.0em";
textElement.SetAttribute("x", "270px");
textElement.SetAttribute("fill", "darkred");
textElement.SetAttribute("y", "140px");
textElement.TextContent = "I can add elements to SVG!";
// สร้างองค์ประกอบวงกลมและกำหนดแอตทริบิวต์
var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
circleElement.Cx.BaseVal.Value = 130;
circleElement.Cy.BaseVal.Value = 130;
circleElement.R.BaseVal.Value = 60;
circleElement.SetAttribute("stroke", "salmon");
circleElement.SetAttribute("stroke-width", "70");
circleElement.SetAttribute("fill", "none");
circleElement.SetAttribute("stroke-dasharray", "2,14");
// เพิ่มองค์ประกอบข้อความและวงกลมลงใน svgElement
svgElement.AppendChild(textElement);
svgElement.AppendChild(circleElement);
// บันทึกเอกสาร
document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
}
ต่อไปนี้คือขั้นตอนง่าย ๆ ในการแก้ไขไฟล์ SVG โดยใช้โค้ด C# ด้านบน ซึ่งจะเพิ่ม <circle>
และ <text>
ลงในเอกสาร SVG:
สร้างเอกสาร SVG จากศูนย์ด้วย constructor SVGDocument()
ใช้พร็อพเพอร์ตี้
RootElement
เพื่อเข้าถึง<svg>
หลักของเอกสารสร้าง
<text>
และ<circle>
โดยใช้:- เมธอด CreateElementNS() เพื่อสร้าง SVGTextElement และ SVGCircleElement
- เมธอด SetAttribute() เพื่อกำหนดตำแหน่ง ขนาด สี ฯลฯ
- เมธอด
AppendChild()
เพื่อเพิ่มองค์ประกอบเข้าไปใน
<svg>
ใช้เมธอด Save() เพื่อบันทึกไฟล์ SVG ที่แก้ไขแล้ว
ผลลัพธ์ที่ได้จากโค้ดทั้งสองแบบข้างต้นเหมือนกัน และจะได้ไฟล์ชื่อ svg-from-scratch.svg
ซึ่งหน้าตาเป็นดังนี้:
แหล่งข้อมูลเพิ่มเติม
- บทความ Edit SVG File – C# Examples จะแนะนำการอ่านและแก้ไข DOM ของ SVG โดยใช้ Aspose.SVG for .NET
- บท SVG Builder – Advanced SVG Creation and Modification แสดงวิธีการจัดการ SVG อย่างมีประสิทธิภาพด้วย Builder API
- บทความ Element Builders เจาะลึกคลาส Element Builder ที่ช่วยให้งาน SVG programming ง่ายขึ้นมาก
ฟีเจอร์อื่นที่รองรับ
ใช้ไลบรารี Aspose.SVG C# เพื่อแปลง ผสาน แก้ไขเอกสาร SVG แปลงรหัสสี แปลงภาพเป็นเวกเตอร์ และอีกมากมาย!