SVG การไล่ระดับสี
การไล่ระดับสีเป็นราบรื่นจากสีหนึ่งไปยังอีก นอกจากนี้การเปลี่ยนหลายสีสามารถนำไปใช้องค์ประกอบเดียวกัน
มีสองประเภทหลักของการไล่ระดับสีใน SVG คือ:
- เชิงเส้น
- เป็นแฉก
SVG ลาดเชิงเส้น - <linearGradient>
<linearGradient> องค์ประกอบที่จะใช้ในการกำหนดลาดเชิงเส้น
<linearGradient> องค์ประกอบจะต้องซ้อนกันภายใน <defs> แท็ก <defs> แท็กสั้นสำหรับคำจำกัดความและมีความหมายขององค์ประกอบพิเศษ (such as gradients)
การไล่ระดับสีเชิงเส้นสามารถกำหนดเป็นแนวนอนแนวตั้งหรือเชิงมุมการไล่ระดับสี:
- การไล่ระดับสีแนวนอนถูกสร้างขึ้นเมื่อ Y1 และ Y2 มีค่าเท่ากันและ X1 และ X2 แตกต่างกัน
- การไล่ระดับสีในแนวตั้งถูกสร้างขึ้นเมื่อ X1 และ X2 มีค่าเท่ากันและ Y1 และ Y2 แตกต่างกัน
- การไล่ระดับสีเชิงมุมถูกสร้างขึ้นเมื่อ X1 และ X2 แตกต่างกันและ Y1 และ Y2 แตกต่างกัน
ตัวอย่างที่ 1
กำหนดวงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดง:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
ลองตัวเอง» Code explanation:
- id แอตทริบิวต์ของ <linearGradient> แท็กกำหนดชื่อเฉพาะสำหรับการไล่ระดับสี
- X1, X2, Y1, Y2 แอตทริบิวต์ของ <linearGradient> แท็กกำหนดเริ่มต้นและสิ้นสุดตำแหน่งของการไล่ระดับสี
- ช่วงสีไล่ระดับสีจะประกอบด้วยสองคนหรือมากกว่าสี แต่ละสีจะถูกระบุด้วย <stop> แท็ก offset แอตทริบิวต์ที่ถูกใช้ในการกำหนดสีที่ไล่ระดับสีเริ่มต้นและสิ้นสุด
- fill แอตทริบิวต์การเชื่อมโยงองค์ประกอบวงรีเพื่อการไล่ระดับสี
ตัวอย่างที่ 2
กำหนดวงรีที่มีความลาดชันเชิงเส้นในแนวตั้งจากสีเหลืองเป็นสีแดง:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
ลองตัวเอง» ตัวอย่างที่ 3
กำหนดวงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดงและเพิ่มข้อความภายในวงรี:
นี่คือรหัส SVG นี้:
ตัวอย่าง
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
ลองตัวเอง» Code explanation:
- <text> องค์ประกอบที่จะใช้ในการเพิ่มข้อความ