กราดฉันท์เชิงเส้นตรง SVG

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

การเปลี่ยนแปลงสี SVG

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

ใน SVG มีสองประเภทหลักของการเปลี่ยนแปลง

  • การเปลี่ยนแปลงสีที่เรียบเนียน
  • การเปลี่ยนแปลงสีที่ส่องโดยรังสี

การเปลี่ยนแปลงสีที่เรียบเนียน

<linearGradient> สามารถใช้เพื่อกำหนดการเปลี่ยนแปลงสีที่เรียบเนียนของ SVG

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

การเปลี่ยนแปลงสีที่เรียบเนียนสามารถเป็นการเปลี่ยนแปลงตั้งแนวนอน ตั้งแนวตั้ง หรือมุม

  • เมื่อ y1 และ y2 เท่ากัน และ x1 และ x2 ต่างกัน สามารถสร้างการเปลี่ยนแปลงตั้งแนวนอน
  • เมื่อ x1 และ x2 เท่ากัน และ y1 และ y2 ต่างกัน สามารถสร้างการเปลี่ยนแปลงตั้งแนวตั้ง
  • เมื่อ x1 และ x2 ต่างกัน และ y1 และ y2 ต่างกัน สามารถสร้างการเปลี่ยนแปลงมุม

โปรดคัดลอกรหัสด้านล่างและบันทึกไฟล์เป็น "linear1.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>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

การชี้แจงรหัส

  • ตัวแปร id ของแท็ก <linearGradient> สามารถกำหนดชื่อเดี่ยวๆ สำหรับการเปลี่ยนแปลง
  • fill:url(#orange_red) บวกค่าที่มอบหมายให้แอลิเซย์ลิ่มเชื่อมต่อกับการเปลี่ยนแปลงนี้
  • ตัวแปร x1 และ x2 และ y1 และ y2 ของแท็ก <linearGradient> สามารถกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของการเปลี่ยนแปลง
  • ขอบเขตสีที่เปลี่ยนแปลงสามารถประกอบด้วยสีสองหรือหลายสี โดยแต่ละสีถูกกำหนดโดยแท็ก <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>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

ดูตัวอย่าง （กราดฉันท์ตั้งแนวตั้ง）