ไล่สี SVG ตามเส้น: ตรวจสีรอบทางโค้ง

linearGradient SVG ทั่วไปไม่ได้วัดความคืบหน้าตามเส้นโค้ง มันระบายตามเวกเตอร์ไล่สีในระบบพิกัด หากริบบิ้นวกกลับ จุดสองจุดที่ตำแหน่งเดียวกันตามเวกเตอร์อาจได้สีเดียวกัน แม้อยู่ห่างกันตามแนวริบบิ้น

สำหรับงานคงที่ที่ต้องการสีเปลี่ยนรอบโค้ง คุณสร้างส่วนสีแยกได้ ทำให้ควบคุมลำดับ แต่เพิ่มรูปทรงและขอบสีที่เห็น ตัวอย่างต้นฉบับของเราเทียบไล่สีแนวนอนกับแปดแถบที่ตั้งใจเลือกบนเส้นทางเดียวกัน ทั้งสองไฟล์มีเส้นและไม่มีภาพฝัง

ตรวจว่าสีซ้ำที่ใด

ข้อกำหนดเซิร์ฟเวอร์สี SVG2 นิยามไล่สีเชิงเส้นผ่านเวกเตอร์กับจุดสี และไล่สีรัศมีผ่านรูปทรงวงกลมของตน ไม่มีนิยามใดเปลี่ยนเส้นทั่วไปเป็นแกนสีตามระยะเส้น

ริบบิ้นของเราเริ่มบนซ้าย วิ่งขวา อ้อมครึ่งวงกลม แล้วกลับล่างซ้าย ไล่สีแนวนอนทำให้ปลายซ้ายทั้งสองเป็นส้มและโค้งขวาเป็นม่วง นี่เป็นไล่สีตามพิกัดที่ถูกต้อง แต่ตอบโจทย์ออกแบบต่างจาก “เปลี่ยนสีตั้งแต่ต้นถึงปลายเส้นทางนี้”

บทเรียนไล่สีของ MDN อธิบายแบบจำลองปลายและจุดสี การเพิ่มจุดเปลี่ยนลำดับสีที่อิงพิกัด ไม่ทำให้สีตามโค้ง

สีตามพิกัดกับแถบที่สร้าง

เก็บไล่สีทั่วไปเป็นตัวควบคุม

บันทึกไฟล์ครบนี้เป็น coordinate.svg เส้นใช้ความหนา 24 หน่วยใน viewBox 200×160 ส่วนตรงกับครึ่งวงกลมขวาเป็นเส้นกลางแก้ไขได้หนึ่งเส้น

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

เราใช้ gradientUnits="userSpaceOnUse" เพื่อระบุปลายไล่สีชัดในระบบพิกัดต้นทาง การเปลี่ยนเป็นพิกัดกรอบขอบเขตจะเปลี่ยนวิธีระบุปลาย ไม่เพิ่มการระบายตามระยะเส้น ดูเอกสาร gradientUnits และคู่มือพิกัดไล่สี

เส้นทางทั้งหมดเป็นองค์ประกอบ path เดียว เก็บเวอร์ชันง่ายนี้เป็นต้นฉบับรูปทรง แม้ตัดสินใจส่งการแต่งสีซับซ้อนกว่า

สร้างลำดับเป็นขั้นรอบโค้ง

บันทึกต่อไปนี้เป็น bands.svg มันแบ่งเส้นตรงบนเป็นสองชิ้น ครึ่งวงกลมเป็นสี่ส่วนโค้ง และเส้นตรงกลับเป็นสองชิ้น กำหนดสีตามลำดับทาง จากส้มที่ต้นบนถึงม่วงที่ปลายล่าง

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

นี่เป็นแปดแถบที่เลือกด้วยมือและความยาวส่วนไม่เท่ากัน ไม่ใช่การคำนวณสีเพิ่มเท่ากันต่อหน่วยระยะเส้น และไม่สร้างการไล่เฉดต่อเนื่อง พิกัดปลายโค้งทศนิยมที่ปัดเป็นการประมาณเส้นทางเดิม ตัวอย่างนี้ไม่กล่าวว่าเส้นขอบตรงกันทุกพิกเซล

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

เราใช้ stroke-linecap="butt" เพื่อไม่ให้ชิ้นติดกันยื่นเลยปลาย ปลายกลมในทุกส่วนภายในจะทับสีข้างเคียง การเปลี่ยนตรงเป็นโค้งต้องมีทิศตรงกันด้วย คู่มือรอยต่อเรียบ ครอบคลุมความต่อเนื่องรูปทรงแยก

เทียบสองขนาดและสองตำแหน่ง

เราเรนเดอร์ไฟล์ต้นฉบับทั้งคู่ใน Chrome ที่ 200×160 และ 400×320 พิกเซล CSS เบราว์เซอร์ถอดรหัส SVG แล้ววาดลง canvas ที่ขนาดบัฟเฟอร์ตรงขนาดทดสอบ device pixel ratio ของเบราว์เซอร์เป็น 2 ตัวอย่างที่บันทึกมาจากบัฟเฟอร์ canvas ไม่ใช่นับพิกเซลอุปกรณ์ในภาพหน้าจอ

พิกัดต้นทาง (60,30) และ (60,130) อยู่คนละส่วนตรงของทาง แต่ใช้พิกัดแนวนอนเดียวกัน ไล่สีแนวนอนจึงให้สีที่อ่านเหมือนกัน

คู่ตัวอย่างเหมือนกันทั้งสองขนาดที่ทดสอบ โดยอัลฟาในพื้นที่ระบายเป็น 255 พื้นที่ว่างต้นทาง (100,80) มีอัลฟาศูนย์ทั้งหกกรณี นี่ตรวจไฟล์ที่สร้างในเบราว์เซอร์นี้ ไม่รับรองทุกตัวเรนเดอร์หรือทุกพิกเซลขอบ

ภาพแถบสีมีการเปลี่ยนสีเป็นขั้นชัดเจนทั้งสองขนาด ตรวจรอยต่อที่ขนาดส่งจริง โดยเฉพาะหลังส่งออกหรือฝัง ชิ้นแยกอาจเผยรอยจากการลบรอยหยัก การปัดค่า หรือแก้ภายหลัง เพิ่มจำนวนส่วนทำให้ขั้นสีเล็กลง แต่เพิ่มเส้นและขอบที่ต้องดูแล

เลือกการแต่งก่อนขยายโครงสร้างภาพ

การหมุนไล่สีเชิงเส้นเปลี่ยนทิศ การทำซ้ำเปลี่ยนวิธีขยายสี ไม่มีคำสั่งใดทำให้มันเลี้ยวต่อเนื่องกับเส้นกลางวกกลับนี้ ไล่สีรัศมีอาจเหมาะกับองค์ประกอบวงกลม แต่นั่นเป็นรูปทรงสีของมัน ไม่ใช่ทางแก้ทั่วไปตามระยะทาง

หากปรับโค้งภายหลัง ให้แก้ส่วนต่าง ๆ พร้อมกัน เก็บต้นฉบับแบนสำหรับเทียบเส้นทางที่ต้องการ และสำเนาแต่งสีแยก คู่มือคำสั่งเส้นสัมพัทธ์ ช่วยอ่านหรือย้ายคำสั่งเส้นพื้นฐานได้

หากเริ่มจาก PNG หรือ JPG และต้องการเส้นขอบแก้ไขได้ ให้แปลงต้นฉบับด้วย PerfectVector ตรวจรูปและพื้นที่ว่างที่กู้ แล้วเก็บต้นฉบับ SVG สะอาด เลือกหรือสร้างการแต่งสีใหม่หลังตรวจรูปทรง การแปลงเวกเตอร์ไม่รับประกันกู้เฉดต่อเนื่องตรงเดิม และไม่สร้างฟีเจอร์ไล่สีตามเส้นโดยกำเนิด SVG สะอาดเดิมต้องแก้สีและรูปทรงโดยตรง คู่มือแปลงภาพเป็นเวกเตอร์ อธิบายว่าเมื่อใดแปลงแรสเตอร์ช่วยได้

คำถามที่พบบ่อย

ทำให้ linearGradient ตามเส้นโค้งใดก็ได้หรือไม่? นิยาม linearGradient ปกติไม่มีค่าระยะตามเส้น เวกเตอร์พิกัดควบคุมสี ตัวอย่างเป็นขั้นกำหนดสีแยกให้แต่ละส่วนทาง

เพิ่มจุดไล่สีจะแก้สีวกกลับหรือไม่? จุดเพิ่มช่วยละเอียดการเปลี่ยนสีตามเวกเตอร์ไล่สี จุดที่ตำแหน่งเดียวกันบนเวกเตอร์ยังมีสีตามพิกัดเดียวกัน

ไฟล์แถบสีมีภาพแรสเตอร์หรือไม่? ไม่มี ตัวอย่างที่สร้างมีแปดองค์ประกอบเส้นและไม่มีองค์ประกอบภาพ อีกทั้งมีขั้นสีที่เห็น ไม่ใช่ไล่สีตามระยะเส้นต่อเนื่อง

ควรแทนทุกไล่สีด้วยเส้นแยกหรือไม่? ใช้ไล่สีตามพิกัดง่ายกว่าเมื่อตรงการออกแบบ ส่วนแยกมีประโยชน์เมื่อยอมรับลำดับและต้นทุนแก้ได้ ตรวจรอยต่อกับผลเรนเดอร์ปลายทางก่อนส่ง

แหล่งข้อมูล

1. W3C — เซิร์ฟเวอร์สี SVG2 — เวกเตอร์ไล่สี จุดสี และการระบายตามพิกัด
2. MDN — ไล่สีใน SVG — สร้างไล่สีเชิงเส้นและรัศมี
3. MDN — gradientUnits — ระบบพิกัดพื้นที่ผู้ใช้และกรอบขอบเขต
4. MDN — path — องค์ประกอบเส้นและข้อมูลที่ตรวจได้
5. MDN — stroke-linecap — พฤติกรรมปลายเส้นตรงและกลม