SVG z-index ไม่ทำงาน? แก้ลำดับซ้อนพาธ

หากพาธ SVG ยังอยู่หลังรูปทรงอื่นแม้เพิ่ม CSS z-index ให้ตรวจลำดับองค์ประกอบใน SVG ในลำดับวาด SVG ปกติ รูปทรงที่มาก่อนจะระบายสีก่อนและรูปทรงภายหลังจะทับมัน หากต้องการดึงพาธมาด้านหน้า ให้วางไว้หลังรูปทรงที่ควรถูกมันบัง แบบจำลองการเรนเดอร์ SVG กำหนดลำดับนี้

เริ่มจากระบุว่าการซ้อนเกิดที่ไหน SVG ทั้งภาพที่อยู่หลังส่วนหัวหน้าเว็บเป็นปัญหาจัดวาง HTML ส่วนสองรูปทรงภายใน SVG เดียวกันเป็นปัญหาลำดับภาพ วิธีแก้ด้านล่างใช้กับกรณีที่สอง

ดูความต่างจากตราเดียวกัน

เราวาดตราต้นฉบับสามส่วน: ดาวสีส้ม วงกลมสีน้ำเงิน และริบบิ้นสีเขียว ในแผงซ้าย ดาวอยู่ก่อนใน SVG และมี CSS position: relative กับ z-index: 999 เบราว์เซอร์คำนวณค่า z-index นั้นได้ แต่วงกลมทึบและริบบิ้นที่อยู่ภายหลังยังบังดาว ในแผงขวาเปลี่ยนเฉพาะลำดับองค์ประกอบ: ดาวเดิมอยู่สุดท้ายและแสดงด้านหน้า

การทดสอบใช้ HeadlessChrome 141 กับภาพหน้าจอ 1200 × 680 ลำดับลูกที่รายงานคือ star, disk, ribbon ทางซ้าย และ disk, ribbon, star ทางขวา นี่เป็นการทดสอบเฉพาะองค์ประกอบลูก SVG ทั่วไปที่ซ้อนกัน ไม่ใช่คำรับประกันสำหรับตัวเรนเดอร์ กลุ่มซ้อน หรือเอฟเฟกต์ทุกแบบ

แก้ลำดับในไฟล์ SVG

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

ตัวอย่างภาพอย่างง่ายนี้วางดาวไว้สุดท้าย:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

ไม่ต้องเปลี่ยนข้อมูลพาธหรือสีเติมเพื่อแก้กรณีนี้ หากแอปออกแบบมีคำสั่ง Bring to Front ให้ส่งออก SVG หลังใช้คำสั่งแล้วตรวจมาร์กอัปที่บันทึกหรือเปิดใหม่ แผงเลเยอร์ที่เห็นในโปรแกรมช่วยได้ แต่ไฟล์ส่งมอบคือสิ่งที่ตัวเรนเดอร์ถัดไปอ่าน

สำหรับ SVG แบบโต้ตอบ JavaScript ย้ายองค์ประกอบลูกที่มีอยู่ไปท้ายองค์ประกอบแม่ปัจจุบันได้:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

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

ตรวจกลุ่ม ช่องว่าง และลำดับชนิดอื่น

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

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

สุดท้าย paint-order เป็นการตั้งค่าอีกอย่าง มันเปลี่ยนว่าระบายสีเติม เส้นขอบ และ markers ของ องค์ประกอบหนึ่งตัว เมื่อไร ไม่ได้วางองค์ประกอบนั้นเหนือพาธข้างเคียง เอกสารอ้างอิง paint-order ของ MDN นิยามขอบเขตนี้ ใช้คู่มือ paint-order เมื่อเส้นขอบหนาบังสีเติมของตัวเอง ไม่ใช่เมื่อชิ้นสีหนึ่งในโลโก้บังอีกชิ้น

CSS z-index ยังสำคัญกับกล่อง HTML ที่กำหนดตำแหน่งและรายการ flex หรือ grid ตามที่MDN อธิบาย แยกกรณีจัดวางหน้าเว็บนี้ออกจากลำดับพาธที่เก็บภายใน SVG

กระบวนการนี้เกี่ยวข้องกับ PerfectVector อย่างไร

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

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

ตรวจไฟล์ที่จะส่งมอบ

1. บันทึกสำเนา SVG ต้นทางและจัดลำดับเฉพาะวัตถุหรือกลุ่มที่ตั้งใจ
2. เปิดไฟล์ที่บันทึกในเบราว์เซอร์ที่ขนาดซึ่งการซ้อนมีผล เปรียบเทียบกับงานออกแบบต้นทาง
3. เปิดใหม่ในโปรแกรมแก้ไขหรือแอปปลายทาง ตรวจการซ้อนจุดเดิม รวมถึงมาสก์ บริเวณตัด และช่องเปิด
4. หาก SVG โต้ตอบได้ ให้ทดสอบพอยน์เตอร์และ hover หลังจัดลำดับใหม่ รูปทรงที่อยู่บนสุดใหม่อาจรับการโต้ตอบแทนรูปเดิม
5. หากผลดูผิดเฉพาะระดับซูมหรือขนาดส่งออกหนึ่ง ให้ตรวจรอยต่อจากการสุ่มตัวอย่างหรือช่องว่างจริง ก่อนย้ายวัตถุเพิ่ม

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

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

ใช้ CSS z-index ดึงพาธ SVG หนึ่งพาธมาด้านหน้าได้หรือไม่? สำหรับรูปทรงทั่วไปที่มีองค์ประกอบแม่เดียวกันใน SVG เดียว ให้ย้ายพาธไปภายหลังในลำดับเอกสาร SVG CSS z-index ที่มีผลต่อกล่องหน้าเว็บรอบภาพไม่ได้จัดลำดับรูปทรงลูกเหล่านั้นใหม่อย่างเชื่อถือได้

paint-order เปลี่ยนวัตถุ SVG ที่อยู่บนสุดหรือไม่? ไม่ paint-order เปลี่ยนลำดับสีเติม เส้นขอบ และ marker ภายในรูปทรงหรือข้อความหนึ่งองค์ประกอบ จัดลำดับวัตถุแยกใหม่เพื่อเปลี่ยนว่าวัตถุใดบังวัตถุอื่น

ทำไมพาธยังถูกซ่อนหลังย้ายไปท้ายกลุ่ม? ทั้งกลุ่มอาจอยู่หลังอีกกลุ่ม ตรวจกลุ่มแม่และการแปลงพิกัด การตัด มาสก์ หรือ opacity ก่อนย้ายลูกออกจากกลุ่ม

แหล่งอ้างอิง

1. W3C — แบบจำลองการเรนเดอร์ SVG 1.1 — นิยามลำดับระบายสีองค์ประกอบในเอกสาร SVG
2. MDN — Node.appendChild() — อธิบายว่าลูก DOM ที่มีอยู่ย้ายอย่างไรเมื่อเพิ่มท้าย
3. MDN — แอตทริบิวต์ paint-order ของ SVG — จำกัด paint-order ไว้ที่สีเติม เส้นขอบ และ markers ของรูปทรงหนึ่งตัว
4. MDN — พร็อพเพอร์ตี z-index ของ CSS — อธิบาย z-index สำหรับรายการที่กำหนดตำแหน่งและรายการจัดวางในการซ้อนหน้าเว็บ
5. W3C — แบบจำลองการเรนเดอร์ SVG 2 — อธิบายบริบทการซ้อน การจัดกลุ่ม และเป้าหมายของพอยน์เตอร์ใน SVG