แก้ไข 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:

  1. สร้างเอกสาร SVG จากศูนย์ด้วย constructor SVGDocument()

  2. ใช้พร็อพเพอร์ตี้ RootElement เพื่อเข้าถึง <svg> หลักของเอกสาร

  3. สร้าง <text> และ <circle> โดยใช้:

    • เมธอด CreateElementNS() เพื่อสร้าง SVGTextElement และ SVGCircleElement
    • เมธอด SetAttribute() เพื่อกำหนดตำแหน่ง ขนาด สี ฯลฯ
    • เมธอด AppendChild() เพื่อเพิ่มองค์ประกอบเข้าไปใน <svg>
  4. ใช้เมธอด Save() เพื่อบันทึกไฟล์ SVG ที่แก้ไขแล้ว

ผลลัพธ์ที่ได้จากโค้ดทั้งสองแบบข้างต้นเหมือนกัน และจะได้ไฟล์ชื่อ svg-from-scratch.svg ซึ่งหน้าตาเป็นดังนี้:

Text “SVG image with circle and text”


แหล่งข้อมูลเพิ่มเติม

  • บทความ 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 แปลงรหัสสี แปลงภาพเป็นเวกเตอร์ และอีกมากมาย!