การ ไล่ระดับสี SVG - เชิงเส้น

การไล่ระดับสี SVG

การไล่ระดับสีเป็นการเปลี่ยนสีจากสีหนึ่งไปอีกสีหนึ่งอย่างราบรื่น นอกจากนี้ สามารถใช้การเปลี่ยนสีได้หลายแบบกับองค์ประกอบเดียวกัน

การไล่ระดับสีใน SVG มีสองประเภทหลัก:

• เชิงเส้น
• เรเดียล

SVG การไล่ระดับสีเชิงเส้น - <linearGradient>

องค์ประกอบ <linearGradient> ใช้เพื่อกำหนดความลาดชันเชิงเส้น

องค์ประกอบ <linearGradient> ต้องซ้อนอยู่ภายในแท็ก <defs> แท็ก <defs> สั้นสำหรับคำจำกัดความและมีคำจำกัดความขององค์ประกอบพิเศษ (เช่น การไล่ระดับสี)

การไล่ระดับสีเชิงเส้นสามารถกำหนดได้เป็นการไล่ระดับสีในแนวนอน แนวตั้ง หรือเชิงมุม:

• การไล่ระดับสีในแนวนอนถูกสร้างขึ้นเมื่อ y1 และ y2 เท่ากัน และ x1 และ x2 ต่างกัน
• การไล่ระดับสีแนวตั้งถูกสร้างขึ้นเมื่อ x1 และ x2 เท่ากัน และ y1 และ y2 ต่างกัน
• การไล่ระดับสีเชิงมุมถูกสร้างขึ้นเมื่อ x1 และ x2 ต่างกัน และ y1 และ y2 ต่างกัน

ตัวอย่าง 1

กำหนดวงรีด้วยการไล่ระดับเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดง:

นี่คือรหัส SVG:

คำอธิบายรหัส:

• แอตทริบิวต์ id ของแท็ก <linearGradient> กำหนดชื่อเฉพาะสำหรับการไล่ระดับสี
• แอตทริบิวต์ x1, x2, y1,y2 ของแท็ก <linearGradient> กำหนดตำแหน่งเริ่มต้นและสิ้นสุดของการไล่ระดับสี
• ช่วงสีสำหรับการไล่ระดับสีประกอบด้วยสองสีขึ้นไป แต่ละสีจะถูกระบุด้วยแท็ก <stop> แอตทริบิวต์ offset ใช้เพื่อกำหนดว่าสีการไล่ระดับสีเริ่มต้นและสิ้นสุดที่ใด
• แอตทริบิวต์การเติมจะเชื่อมโยงองค์ประกอบวงรีกับการไล่ระดับสี

ตัวอย่าง 2

กำหนดวงรีด้วยการไล่ระดับสีเชิงเส้นในแนวตั้งจากสีเหลืองเป็นสีแดง:

นี่คือรหัส SVG:

ตัวอย่างที่ 3

กำหนดวงรีด้วยการไล่ระดับสีเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดง และเพิ่มข้อความภายในวงรี:

นี่คือรหัส SVG:

คำอธิบายรหัส:

• <text> องค์ประกอบที่ใช้เพื่อเพิ่ม text