ตัวแปลเปลี่ยนแปลงทางรังสี SVG

การเปลี่ยนแปลง SVG ต้องถูกกำหนดในแทร็ก <defs>

การเปลี่ยนแปลงทางกระจาย

<radialGradient> ใช้เพื่อกำหนดการเปลี่ยนแปลงทางกระจาย

แทร็ก <radialGradient> ต้องถูกฝังเข้าไปใน <defs> แทร็ก。<defs> คือสั้นคำของ definitions ซึ่งอนุญาตให้กำหนด element พิเศษเช่น gradient และอื่นๆ

โปรดคัดลอกรหัสด้านล่างและบันทึกไฟล์เป็น "radial1.svg" โปรดบันทึกไฟล์นี้เข้าไปในไดเรกทอรีเว็บของคุณ:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

การอธิบายรหัส:

<radialGradient> แทร็ก id สามารถกำหนดชื่อเด่นสำหรับการเปลี่ยนแปลง fill:url(#grey_blue) แทร็กเชื่อมโยง element ellipse ไปยังการเปลี่ยนแปลงนี้ cx, cy และ r กำหนดรอบนอก และ fx และ fy กำหนดรอบใน สีที่เปลี่ยนแปลงสามารถประกอบด้วยสีสองหรือหลายสี。สีแต่ละสีนั้นกำหนดโดย <stop> แทร็กได้。คุณสมบัติ offset ใช้เพื่อกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของการเปลี่ยนแปลง

ดูตัวอย่าง

อย่างตัวอย่างอื่น:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

ดูตัวอย่าง