SVG ไล่โทนสี - เชิงเส้น

SVG ไล่โทนสี

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

มีสองประเภทหลักของ SVG ไล่โทนสีคือ:

• เชิงเส้น
• เป็นแฉก

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

<LinearGradient> องค์ประกอบที่จะใช้ในการกำหนดลาดเชิงเส้น

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

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

• เมื่อ Y1 และ Y2 มีค่าเท่ากัน แต่ไม่ใช่ทั้งสอง X1 และ X2 สร้างการไล่ระดับสีในแนวนอน
• เมื่อ X1 และ X2 เท่ากัน Y1 และ Y2 จะไม่เหมือนกันคุณสามารถสร้างการไล่ระดับสีในแนวตั้ง
• เมื่อ X1 และ X2 มีความแตกต่างกันและ Y1 และ Y2 จะไม่เหมือนกันคุณสามารถสร้างมุมลาด

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

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

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

การวิเคราะห์รหัสสินค้า:

• แอตทริบิวต์ ID <linearGradient> แท็กอาจเป็นชื่อที่ไม่ซ้ำสำหรับคำนิยามของการไล่ระดับสี
• <LinearGradient> tag X1, X2, Y1 แอตทริบิวต์ Y2 กำหนดจุดเริ่มต้นและจุดสิ้นสุดของการไล่ระดับสี
• ช่วงสีไล่โทนสีสองสีหรือมากกว่า สีโดย <หยุด> แต่ละแท็กเพื่อระบุ ชดเชยจะใช้ในการกำหนดเริ่มต้นและสิ้นสุดตำแหน่งของการไล่ระดับสี
• เติมองค์ประกอบคุณสมบัติการเชื่อมโยงไปยังการไล่ระดับสีของวงรี

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

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

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

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

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

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

การวิเคราะห์รหัสสินค้า:

• <ข้อความ> องค์ประกอบที่จะใช้ในการเพิ่มข้อความ