SVG ไล่โทนสี - สารกัมมันตรังสี
SVG กัมมันตรังสีค่อยเป็นค่อยไป - <radialGradient>
<RadialGradient> องค์ประกอบที่จะใช้ในการกำหนดรัศมีการไล่ระดับสี
<RadialGradient> แท็กจะต้องซ้อนอยู่ภายใน <defs> ตกแต่งภายใน <Defs> แท็กคือคำจำกัดความของคำย่อเช่นองค์ประกอบพิเศษที่สามารถกำหนดเช่นการไล่ระดับสี
ตัวอย่างที่ 1
กําหนดการไล่ระดับสีรัศมีจากสีขาวเป็นรูปวงรีสีน้ำเงิน:
นี่คือรหัส SVG:
ตัวอย่าง
<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" R = "50%" FX = "50%" FY = "50%">
<หยุดชดเชย = "0%" style = "หยุดสี: rgb (255,255,255);
หยุดความทึบ: 0 "/>
<หยุดชดเชยสไตล์ = "100%" = "หยุดสี: rgb (0,0,255); หยุดความทึบ: 1" />
</ RadialGradient>
</ Defs>
<วงรี cx = "200" cy = "70" RX = "85" Ry = "55" เติม = "URL (# grad1)" />
</ อน>
<Defs>
<RadialGradient id = "grad1" cx = "50%" cy = "50%" R = "50%" FX = "50%" FY = "50%">
<หยุดชดเชย = "0%" style = "หยุดสี: rgb (255,255,255);
หยุดความทึบ: 0 "/>
<หยุดชดเชยสไตล์ = "100%" = "หยุดสี: rgb (0,0,255); หยุดความทึบ: 1" />
</ RadialGradient>
</ Defs>
<วงรี cx = "200" cy = "70" RX = "85" Ry = "55" เติม = "URL (# grad1)" />
</ อน>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
การวิเคราะห์รหัสสินค้า:
- แอตทริบิวต์ ID <radialGradient> แท็กอาจเป็นชื่อที่ไม่ซ้ำสำหรับคำนิยามของการไล่ระดับสี
- CX ภาวะและ R แอตทริบิวต์กำหนดวงกลมนอกสุดและ FX และ Fy กำหนดวงกลมด้านในสุด
- ช่วงสีไล่โทนสีอาจจะประกอบด้วยสองคนหรือมากกว่าสี แต่ละสีจะถูกระบุโดยใช้ <หยุด> แท็ก ชดเชยจะใช้ในการกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการไล่ระดับสี
- เติมองค์ประกอบคุณสมบัติการเชื่อมโยงไปยังการไล่ระดับสีของวงรี
ตัวอย่างที่ 2
กำหนดรัศมีการไล่ระดับสีจากสีขาวเป็นรูปไข่สีฟ้าอื่น:
นี่คือรหัส SVG:
ตัวอย่าง
<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<Defs>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" R = "30%" FX = "50%" FY = "50%">
<หยุดชดเชย = "0%" style = "หยุดสี: rgb (255,255,255);
หยุดความทึบ: 0 "/>
<หยุดชดเชยสไตล์ = "100%" = "หยุดสี: rgb (0,0,255); หยุดความทึบ: 1" />
</ RadialGradient>
</ Defs>
<วงรี cx = "200" cy = "70" RX = "85" Ry = "55" เติม = "URL (# grad1)" />
</ อน>
<Defs>
<RadialGradient id = "grad1" cx = "20%" cy = "30%" R = "30%" FX = "50%" FY = "50%">
<หยุดชดเชย = "0%" style = "หยุดสี: rgb (255,255,255);
หยุดความทึบ: 0 "/>
<หยุดชดเชยสไตล์ = "100%" = "หยุดสี: rgb (0,0,255); หยุดความทึบ: 1" />
</ RadialGradient>
</ Defs>
<วงรี cx = "200" cy = "70" RX = "85" Ry = "55" เติม = "URL (# grad1)" />
</ อน>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)