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

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

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

1. C# API เพื่อเติมและลากเส้นใน SVG
2. การเติม SVG คืออะไร
3. SVG Stroke คืออะไร
4. จังหวะและการเติมใน SVG
5. เติมและลากเส้นใน SVG
6. เส้นทางการเติมและจังหวะใน SVG
7. ใช้การเติมและจังหวะโดยใช้สไตล์

C# API เพื่อเติมและลากเส้นใน SVG

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

คลาส SVGDocument ของ API แสดงถึงรากของลำดับชั้น SVG และเก็บเนื้อหาทั้งหมด เมธอด Save() ของคลาสนี้อนุญาตให้บันทึก SVG ไปยังเส้นทางไฟล์ที่ระบุ เมธอด QuerySelector() จะส่งคืนองค์ประกอบแรกในเอกสารที่ตรงกับตัวเลือก API รองรับการทำงานกับรูปร่างยอดนิยม เช่น สี่เหลี่ยม วงกลม วงรี เส้น โพลีไลน์ ฯลฯ API มีคลาสแยกต่างหากเพื่อแสดงรูปร่างที่รองรับเหล่านี้ เช่น SVGCircleElement สำหรับวงกลม SVGPolygonElement สำหรับโพลิกอน เป็นต้น

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

PM> Install-Package Aspose.SVG

SVG เติมคืออะไร

คุณสมบัติการเติมเป็นหนึ่งในคุณสมบัติการนำเสนอ SVG พื้นฐานที่ใช้ในการกำหนดสีของรูปร่างภายในโครงร่าง

เราสามารถกำหนดแอตทริบิวต์เติมต่อไปนี้:

• เติม: ตั้งค่าสีที่จะเติม ระบุไม่มีหรือโปร่งใสหากไม่มีการเติม
• เติมความทึบ: ตั้งค่าความทึบระหว่าง 0 ถึง 1
• กฎการเติม: กำหนดวิธีกำหนดพื้นที่ภายในของรูปร่าง เช่น ไม่ใช่ศูนย์ คู่ คี่

SVG โรคหลอดเลือดสมองคืออะไร?

คุณสมบัติเส้นขีดกำหนดโครงร่างหรือเส้นขอบของรูปร่าง SVG แอตทริบิวต์การนำเสนอแบบเส้นขีดกำหนดสีของโครงร่างของรูปร่าง

เราสามารถกำหนดลักษณะจังหวะได้ดังนี้

• Stroke: ตั้งค่าสี
• stroke-dashharray: ระบุประเภทของเส้นประ
• ระยะชัก-dashoffset
• stroke-linecap: ควบคุมรูปร่างของปลายเส้น เช่น ก้น สี่เหลี่ยม และกลม
• stroke-linejoin: ระบุวิธีการรวมเส้นสองเส้น เช่น ตุ้มปี่ บาก และกลม
• stroke-miterlimit: ต้องมากกว่าหรือเท่ากับ 1 ถ้าใช้
• stroke-opacity: ตั้งค่าความทึบระหว่าง 0 ถึง 1
• ความกว้างของเส้นขีด: ตั้งค่าความกว้าง

การเติมและจังหวะใน SVG

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

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

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

เรายังสามารถใช้คุณสมบัติสไตล์เดียวกันในแอตทริบิวต์การนำเสนอได้ดังที่แสดงด้านล่าง:

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

ในการระบุสี SVG เราสามารถใช้ชื่อสี เช่น แดง น้ำเงิน เป็นต้น นอกจากนี้เรายังสามารถใช้ค่า RGB หรือค่า HEX สำหรับสีได้อีกด้วย

เติมและขีดวงกลมใน C#

เราสามารถตั้งค่าคุณสมบัติการเติม SVG และเส้นขีด SVG สำหรับวงกลมโดยทำตามขั้นตอนด้านล่าง:

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

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

// ตัวอย่างรหัสนี้สาธิตวิธีการตั้งค่าแอตทริบิวต์เติมและเส้นขีดสำหรับองค์ประกอบวงกลมของ SVG ใน C#
// โหลดภาพ SVG ที่มีอยู่
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

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

// ค้นหาองค์ประกอบวงกลมทั้งหมดในองค์ประกอบ g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// รับองค์ประกอบวงกลมแรก
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// ตั้งค่าแอตทริบิวต์การเติม
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// ตั้งค่าแอตทริบิวต์จังหวะ
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

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

โปรดดูเนื้อหาด้านล่างของภาพ 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>

นี่คือเนื้อหาของรูปภาพ 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>

เส้นทางการเติมและจังหวะใน C

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

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

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

// ตัวอย่างรหัสนี้สาธิตวิธีการตั้งค่าแอตทริบิวต์เติมและเส้นขีดสำหรับองค์ประกอบเส้นทางของ SVG ใน C#
// โหลดภาพ SVG ที่มีอยู่
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

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

// รับองค์ประกอบเส้นทางแรก
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// ตั้งค่าแอตทริบิวต์การเติม
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// ตั้งค่าแอตทริบิวต์จังหวะ
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

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

โปรดดูเนื้อหาด้านล่างของอิมเมจ Example-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>

โปรดดูเนื้อหาด้านล่างของรูปภาพ Fill-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="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

ใช้การเติมและจังหวะโดยใช้สไตล์ใน C

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

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

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

// ตัวอย่างโค้ดนี้สาธิตวิธีการใช้แอตทริบิวต์เติมและเส้นขีดโดยใช้สไตล์ CSS ใน C#
// สร้าง SVG ใหม่
using (var document = new SVGDocument())
{
    // รับองค์ประกอบ SVG รูทของเอกสาร
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // เพิ่มแวดวง
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // ตั้งค่าแอตทริบิวต์สไตล์
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // เพิ่มวงกลมให้กับองค์ประกอบราก
    svgElement.AppendChild(circle);
    
    // บันทึก SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

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

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

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

บทสรุป

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

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

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

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

• เปลี่ยนสี SVG หรือพื้นหลังโดยทางโปรแกรมใน C #