> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # ไล่สี SVG ตามเส้น: ตรวจสีรอบทางโค้ง > เทียบการไล่สีตามพิกัด SVG กับแถบสีที่ออกแบบรอบริบบิ้นโค้ง ตรวจต้นฉบับ ทดสอบสองขนาด และเลือกข้อแลกเปลี่ยนด้านรูปทรง Source: https://perfectvector.com/th/blog/svg-gradient-curved-stroke Language: th Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 `linearGradient` SVG ทั่วไปไม่ได้วัดความคืบหน้าตามเส้นโค้ง มันระบายตามเวกเตอร์ไล่สีในระบบพิกัด หากริบบิ้นวกกลับ จุดสองจุดที่ตำแหน่งเดียวกันตามเวกเตอร์อาจได้สีเดียวกัน แม้อยู่ห่างกันตามแนวริบบิ้น สำหรับงานคงที่ที่ต้องการสีเปลี่ยนรอบโค้ง คุณสร้างส่วนสีแยกได้ ทำให้ควบคุมลำดับ แต่เพิ่มรูปทรงและขอบสีที่เห็น ตัวอย่างต้นฉบับของเราเทียบไล่สีแนวนอนกับแปดแถบที่ตั้งใจเลือกบนเส้นทางเดียวกัน ทั้งสองไฟล์มีเส้นและไม่มีภาพฝัง ## ตรวจว่าสีซ้ำที่ใด [ข้อกำหนดเซิร์ฟเวอร์สี SVG2](https://www.w3.org/TR/SVG2/pservers.html) นิยามไล่สีเชิงเส้นผ่านเวกเตอร์กับจุดสี และไล่สีรัศมีผ่านรูปทรงวงกลมของตน ไม่มีนิยามใดเปลี่ยนเส้นทั่วไปเป็นแกนสีตามระยะเส้น ริบบิ้นของเราเริ่มบนซ้าย วิ่งขวา อ้อมครึ่งวงกลม แล้วกลับล่างซ้าย ไล่สีแนวนอนทำให้ปลายซ้ายทั้งสองเป็นส้มและโค้งขวาเป็นม่วง นี่เป็นไล่สีตามพิกัดที่ถูกต้อง แต่ตอบโจทย์ออกแบบต่างจาก “เปลี่ยนสีตั้งแต่ต้นถึงปลายเส้นทางนี้” [บทเรียนไล่สีของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) อธิบายแบบจำลองปลายและจุดสี การเพิ่มจุดเปลี่ยนลำดับสีที่อิงพิกัด ไม่ทำให้สีตามโค้ง **สีตามพิกัดกับแถบที่สร้าง** ![การเทียบเชิงแนวคิดของริบบิ้นโค้งวกกลับที่ปลายมีสีซ้ำ กับริบบิ้นแถบสีแยกที่เปลี่ยนต่อเนื่องรอบโค้ง](https://perfectvector.com/blog/svg-gradient-curved-stroke/coordinate-and-bands.webp) *ภาพอธิบาย: ไล่สีตามพิกัดอาจซ้ำสีบนทางวกกลับ ส่วนแถบแยกกำหนดลำดับต้นถึงปลายต่างออกไป จำนวนองค์ประกอบจริงและตัวอย่างเบราว์เซอร์ด้านล่างมาจาก SVG ที่สร้างแยก* ## เก็บไล่สีทั่วไปเป็นตัวควบคุม บันทึกไฟล์ครบนี้เป็น `coordinate.svg` เส้นใช้ความหนา 24 หน่วยใน viewBox `200×160` ส่วนตรงกับครึ่งวงกลมขวาเป็นเส้นกลางแก้ไขได้หนึ่งเส้น ```svg ``` เราใช้ `gradientUnits="userSpaceOnUse"` เพื่อระบุปลายไล่สีชัดในระบบพิกัดต้นทาง การเปลี่ยนเป็นพิกัดกรอบขอบเขตจะเปลี่ยนวิธีระบุปลาย ไม่เพิ่มการระบายตามระยะเส้น ดู[เอกสาร gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) และ[คู่มือพิกัดไล่สี](https://perfectvector.com/th/blog/svg-gradient-units) เส้นทางทั้งหมดเป็นองค์ประกอบ `path` เดียว เก็บเวอร์ชันง่ายนี้เป็นต้นฉบับรูปทรง แม้ตัดสินใจส่งการแต่งสีซับซ้อนกว่า ## สร้างลำดับเป็นขั้นรอบโค้ง บันทึกต่อไปนี้เป็น `bands.svg` มันแบ่งเส้นตรงบนเป็นสองชิ้น ครึ่งวงกลมเป็นสี่ส่วนโค้ง และเส้นตรงกลับเป็นสองชิ้น กำหนดสีตามลำดับทาง จากส้มที่ต้นบนถึงม่วงที่ปลายล่าง ```svg ``` นี่เป็นแปดแถบที่เลือกด้วยมือและความยาวส่วนไม่เท่ากัน ไม่ใช่การคำนวณสีเพิ่มเท่ากันต่อหน่วยระยะเส้น และไม่สร้างการไล่เฉดต่อเนื่อง พิกัดปลายโค้งทศนิยมที่ปัดเป็นการประมาณเส้นทางเดิม ตัวอย่างนี้ไม่กล่าวว่าเส้นขอบตรงกันทุกพิกเซล [เอกสาร `path`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) อธิบายองค์ประกอบและข้อมูลเส้น แต่ละส่วนยังเป็นเส้นกลางมีความหนา ไม่ใช่รูปเติมปิดที่แปลงขอบแล้ว หากปลายทางต้องการรูปปิด ให้เตรียมและตรวจรูปทรงแยกแทนถือว่าชิ้นเส้นเหล่านี้เป็นเส้นขอบตัด เราใช้ [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) เพื่อไม่ให้ชิ้นติดกันยื่นเลยปลาย ปลายกลมในทุกส่วนภายในจะทับสีข้างเคียง การเปลี่ยนตรงเป็นโค้งต้องมีทิศตรงกันด้วย [คู่มือรอยต่อเรียบ](https://perfectvector.com/th/blog/svg-bezier-smooth-joins) ครอบคลุมความต่อเนื่องรูปทรงแยก ## เทียบสองขนาดและสองตำแหน่ง เราเรนเดอร์ไฟล์ต้นฉบับทั้งคู่ใน Chrome ที่ `200×160` และ `400×320` พิกเซล CSS เบราว์เซอร์ถอดรหัส SVG แล้ววาดลง canvas ที่ขนาดบัฟเฟอร์ตรงขนาดทดสอบ device pixel ratio ของเบราว์เซอร์เป็น 2 ตัวอย่างที่บันทึกมาจากบัฟเฟอร์ canvas ไม่ใช่นับพิกเซลอุปกรณ์ในภาพหน้าจอ พิกัดต้นทาง `(60,30)` และ `(60,130)` อยู่คนละส่วนตรงของทาง แต่ใช้พิกัดแนวนอนเดียวกัน ไล่สีแนวนอนจึงให้สีที่อ่านเหมือนกัน | ไฟล์ | จุดตัวอย่างบนที่ x=60 | จุดตัวอย่างล่างที่ x=60 | เส้น | ภาพฝัง | | ---------------- | --------------------- | ----------------------- | ---- | ------ | | ไล่สีตามพิกัด | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 | | แถบที่สร้าง | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 | | ต้นฉบับรูปทรงแบน | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 | คู่ตัวอย่างเหมือนกันทั้งสองขนาดที่ทดสอบ โดยอัลฟาในพื้นที่ระบายเป็น 255 พื้นที่ว่างต้นทาง `(100,80)` มีอัลฟาศูนย์ทั้งหกกรณี นี่ตรวจไฟล์ที่สร้างในเบราว์เซอร์นี้ ไม่รับรองทุกตัวเรนเดอร์หรือทุกพิกเซลขอบ ภาพแถบสีมีการเปลี่ยนสีเป็นขั้นชัดเจนทั้งสองขนาด ตรวจรอยต่อที่ขนาดส่งจริง โดยเฉพาะหลังส่งออกหรือฝัง ชิ้นแยกอาจเผยรอยจากการลบรอยหยัก การปัดค่า หรือแก้ภายหลัง เพิ่มจำนวนส่วนทำให้ขั้นสีเล็กลง แต่เพิ่มเส้นและขอบที่ต้องดูแล ## เลือกการแต่งก่อนขยายโครงสร้างภาพ | ความต้องการออกแบบ | จุดเริ่มที่มีประโยชน์ | สิ่งที่ต้องตรวจ | | -------------------------- | ------------------------------------ | ------------------------------------------------------------ | | สีตามทิศหน้า | ไล่สีตามพิกัดหนึ่งชุด | ตำแหน่งปลายและขอบเขตต้นฉบับ | | เปลี่ยนสีคงที่รอบทางนี้ | ส่วนสีที่ตั้งใจเลือก | สีส่วน ทิศสัมผัสรอยต่อ และรอยแยก | | เปลี่ยนสีนุ่มตามโค้งทั่วไป | การประมาณที่ออกแบบแยกหรือวิธีส่งอื่น | การเลือกตัวอย่าง จุดตัด รูปทรงแก้ไขได้ และการเรนเดอร์ปลายทาง | การหมุนไล่สีเชิงเส้นเปลี่ยนทิศ การทำซ้ำเปลี่ยนวิธีขยายสี ไม่มีคำสั่งใดทำให้มันเลี้ยวต่อเนื่องกับเส้นกลางวกกลับนี้ ไล่สีรัศมีอาจเหมาะกับองค์ประกอบวงกลม แต่นั่นเป็นรูปทรงสีของมัน ไม่ใช่ทางแก้ทั่วไปตามระยะทาง หากปรับโค้งภายหลัง ให้แก้ส่วนต่าง ๆ พร้อมกัน เก็บต้นฉบับแบนสำหรับเทียบเส้นทางที่ต้องการ และสำเนาแต่งสีแยก [คู่มือคำสั่งเส้นสัมพัทธ์](https://perfectvector.com/th/blog/svg-relative-path-commands) ช่วยอ่านหรือย้ายคำสั่งเส้นพื้นฐานได้ หากเริ่มจาก PNG หรือ JPG และต้องการเส้นขอบแก้ไขได้ ให้[แปลงต้นฉบับด้วย PerfectVector](https://perfectvector.com/th/image-to-vector) ตรวจรูปและพื้นที่ว่างที่กู้ แล้วเก็บต้นฉบับ SVG สะอาด เลือกหรือสร้างการแต่งสีใหม่หลังตรวจรูปทรง การแปลงเวกเตอร์ไม่รับประกันกู้เฉดต่อเนื่องตรงเดิม และไม่สร้างฟีเจอร์ไล่สีตามเส้นโดยกำเนิด SVG สะอาดเดิมต้องแก้สีและรูปทรงโดยตรง [คู่มือแปลงภาพเป็นเวกเตอร์](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายว่าเมื่อใดแปลงแรสเตอร์ช่วยได้ ## คำถามที่พบบ่อย **ทำให้ linearGradient ตามเส้นโค้งใดก็ได้หรือไม่?** นิยาม linearGradient ปกติไม่มีค่าระยะตามเส้น เวกเตอร์พิกัดควบคุมสี ตัวอย่างเป็นขั้นกำหนดสีแยกให้แต่ละส่วนทาง **เพิ่มจุดไล่สีจะแก้สีวกกลับหรือไม่?** จุดเพิ่มช่วยละเอียดการเปลี่ยนสีตามเวกเตอร์ไล่สี จุดที่ตำแหน่งเดียวกันบนเวกเตอร์ยังมีสีตามพิกัดเดียวกัน **ไฟล์แถบสีมีภาพแรสเตอร์หรือไม่?** ไม่มี ตัวอย่างที่สร้างมีแปดองค์ประกอบเส้นและไม่มีองค์ประกอบภาพ อีกทั้งมีขั้นสีที่เห็น ไม่ใช่ไล่สีตามระยะเส้นต่อเนื่อง **ควรแทนทุกไล่สีด้วยเส้นแยกหรือไม่?** ใช้ไล่สีตามพิกัดง่ายกว่าเมื่อตรงการออกแบบ ส่วนแยกมีประโยชน์เมื่อยอมรับลำดับและต้นทุนแก้ได้ ตรวจรอยต่อกับผลเรนเดอร์ปลายทางก่อนส่ง ## แหล่งข้อมูล 1. [W3C — เซิร์ฟเวอร์สี SVG2](https://www.w3.org/TR/SVG2/pservers.html) — เวกเตอร์ไล่สี จุดสี และการระบายตามพิกัด 2. [MDN — ไล่สีใน SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — สร้างไล่สีเชิงเส้นและรัศมี 3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — ระบบพิกัดพื้นที่ผู้ใช้และกรอบขอบเขต 4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — องค์ประกอบเส้นและข้อมูลที่ตรวจได้ 5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — พฤติกรรมปลายเส้นตรงและกลม ## Explore - [Read the HTML article](https://perfectvector.com/th/blog/svg-gradient-curved-stroke) - [ทำมุมพาธ SVG ให้มนด้วยการเปลี่ยนรูปเติมสี](https://perfectvector.com/th/blog/round-svg-path-corners.md) - [ตัดบรรทัดข้อความ SVG ด้วยการวัดและ tspan](https://perfectvector.com/th/blog/svg-text-wrap-tspan.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)