แก้ช่องว่างใต้ SVG อินไลน์ด้วยเค้าโครง CSS

ช่องว่างแคบใต้ SVG อาจมาจากบรรทัด HTML ที่บรรจุมัน ภาพอินไลน์ร่วมอยู่ในเค้าโครงข้อความ ซึ่งเส้นฐานกับความสูงบรรทัดอาจเหลือพื้นที่ใต้กล่อง สำหรับภาพเดี่ยว ลอง display: block สำหรับภาพที่ต้องอยู่ข้างข้อความ ให้เลือกการจัดแนวอินไลน์โดยตั้งใจ

หาตำแหน่งช่องว่างก่อน พื้นที่ นอกกล่ององค์ประกอบ SVG ต้องตรวจเค้าโครงหน้า พื้นที่ ในกล่องนั้น อาจมาจากพื้นที่วาด SVG หรือกฎการปรับให้พอดี การลากโลโก้ใหม่ไม่แก้ปัญหาแรก คู่มือนี้ช่วยแยกสองกรณีและตรวจการแก้ CSS เฉพาะจุดเล็ก ๆ

หาว่ากล่องใดมีพื้นที่ว่าง

ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ให้พื้นหลัง SVG กับตัวครอบโดยตรงเป็นสีตัดกัน ตรวจเส้นกรอบองค์ประกอบด้วย พื้นหลังเป็นเครื่องมือวินิจฉัยชั่วคราว ไม่จำเป็นต้องเป็นส่วนของงานส่ง

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

หากสีพีชต่อใต้กล่อง SVG เขียว ให้ตรวจเค้าโครงบรรทัด ระยะรองขอบ เส้นขอบ ความสูง และองค์ประกอบข้างเคียงของตัวครอบ หากเขียวต่อใต้ภาพที่เห็น ให้ตรวจ viewBox ขอบเขตภาพที่วาด และการพอดีกับวิวพอร์ต

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

วิธีฝังก็สำคัญ <svg> อินไลน์เป็นส่วนของเอกสาร HTML ส่วน <img src="logo.svg"> โหลดภาพภายนอก ขอบเขตการจัดสไตล์ต่างกันตามที่คู่มือ SVG อินไลน์เทียบภาพ อธิบาย ในการวินิจฉัยนี้ ให้ตรวจองค์ประกอบที่วางในแถว HTML แทนการถือว่าไฟล์ SVG ทุกไฟล์ฝังเหมือนกัน

ทำไมเส้นฐานเหลือพื้นที่ด้านล่างได้

บรรทัดข้อความต้องมีที่สำหรับตัวอักษรที่ยื่นต่ำกว่าเส้นฐาน เช่น g และ p ภาพอินไลน์อาจตรงเส้นฐานนั้น ขณะที่บรรทัดที่ครอบยังยื่นต่ำกว่า นี่จึงเป็นเหตุที่ตั้งระยะขอบภาพเป็นศูนย์แล้วอาจไม่มีอะไรเปลี่ยน

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

อย่าสับสนเส้นฐานนี้กับเส้นฐานตัวอักษรที่วาด ใน SVG การเปลี่ยน dominant-baseline บนองค์ประกอบข้อความ SVG จัดการตัวอักษรภายใน ไม่ได้เลือกว่าองค์ประกอบภาพทั้งหมดอยู่ตรงไหนในบรรทัด HTML

ตัวอย่างที่วัดโดยไม่มีพื้นที่วาด SVG ว่าง

เราสร้างหน้า HTML ต้นฉบับที่มี SVG เดียวกันสามสำเนา แต่ละ SVG มี viewBox 240 × 100 ซึ่งสี่เหลี่ยมเติมเต็มขอบจรดขอบ และเรนเดอร์ที่ 240 × 100 พิกเซล CSS แถวใช้ Arial ขนาด 40px และความสูงบรรทัด 48px เปลี่ยนเฉพาะการแสดงหรือจัดแนว SVG

เบราว์เซอร์คืนค่าการวัดองค์ประกอบดังนี้:

นี่คือค่าจากหน้านี้ในเบราว์เซอร์เดียว ไม่ได้สัญญาว่าทุกเค้าโครงจะมีช่อง 10.5px เราเทียบพิกัดล่างตัวครอบกับพิกัดล่าง SVG ความสูง SVG คง 100px ทั้งสามกรณี การแก้จึงไม่ได้ย่อหรือตัดภาพ

ใช้บล็อกสำหรับภาพเดี่ยว

เมื่อโลโก้ควรอยู่ในแถวของตัวเอง ให้ใส่กฎเค้าโครงกับภาพนั้นโดยเฉพาะ:

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

เอกสาร display ของ MDN แยกบทบาทบล็อกกับอินไลน์ในเค้าโครงตามลำดับ การทำ SVG เป็นบล็อกนำบทบาทรายการอินไลน์ในบรรทัดข้อความรอบข้างออก ไม่ได้แก้พาธต้นทางหรือลบขอบภาพโปร่งใส

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

เลือกตัวเลือกให้แคบ การใช้ svg { display: block; } ทั่วเว็บไซต์อาจย้ายไอคอนที่ตั้งใจอยู่ในป้ายหรือประโยค เลือกคอมโพเนนต์ที่ต้องการภาพเดี่ยว แล้วตรวจการใช้จุดอื่นของมัน

เก็บภาพข้างข้อความเป็นอินไลน์แล้วเลือกการจัดแนว

สำหรับไอคอนหรือเครื่องหมายเล็กข้างคำ อินไลน์อาจเป็นเค้าโครงที่ตั้งใจ vertical-align: bottom จัดขอบระยะขอบล่างให้ตรงล่างบรรทัด vertical-align: middle ใช้เส้นฐานและความสูง x ของตัวแม่ ไม่ใช่คำสั่งให้จัดศูนย์กลางเรขาคณิตทุกภาพในทุกกล่อง ดูนิยาม vertical-align ของ MDN

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

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

กรณีชิดล่างในตัวอย่างมีแต่ภาพ ยืนยันว่าการจัดแนวนี้ลบแถบในแถวนั้น ไม่ได้ยืนยันว่าทุกแถวผสมข้อความกับไอคอนมีความสูงหรือหน้าตาเดียวกัน

เลี่ยงใช้ line-height: 0 บนกล่องข้อความร่วมเป็นวิธีแก้แรก เพราะเปลี่ยนเค้าโครงข้อความด้วยพร้อมกับระยะภาพ อาจซ่อนอาการทันทีแต่ทำให้คอมโพเนนต์พึ่งค่าทับภายหลังเมื่อมีคนเพิ่มป้าย เลือกการแสดงหรือจัดแนวที่ต้องการก่อนเปลี่ยนตัวพิมพ์ของตัวแม่

ตรวจการแก้โดยไม่เปลี่ยนภาพ

เปลี่ยนครั้งละอย่างแล้วตรวจ:

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

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

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

เมื่อใดการแปลงเวกเตอร์ช่วยกระบวนการนี้

SVG เดิมที่แก้ได้มักต้องแก้ CSS หรือพื้นที่วาดในกรณีนี้ เก็บไฟล์นั้นและวินิจฉัยตำแหน่งก่อนสร้างใหม่

หากเครื่องหมายเองมีเพียง PNG หรือ JPG และต้องการเส้นขอบแก้ได้ ให้ใช้ PerfectVector แปลงภาพต้นทางเป็นเวกเตอร์ แล้วตรวจเส้นขอบ ช่องเปิด และพื้นที่วาดต้นทางก่อนวางผลบนหน้า แบบประเมินคุณภาพการลากเส้น ช่วยตรวจเรขาคณิตแยกนั้น การแปลงเวกเตอร์เตรียมรูปทรง CSS ของหน้ายังควบคุมกล่องบรรทัด HTML

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

ทำไม margin: 0 ไม่ลบช่องใต้ SVG? พื้นที่อาจอยู่ในบรรทัดข้อความที่ครอบแทนระยะขอบ SVG ตรวจขอบ SVG กับตัวครอบ แล้วทดสอบบล็อกสำหรับภาพเดี่ยวหรือการจัดแนวตั้งที่เหมาะกับภาพอินไลน์

display: block ตัดพื้นที่ว่างออกจาก SVG ไหม? ไม่ มันเปลี่ยนบทบาทองค์ประกอบในเค้าโครง HTML พื้นที่ว่างใน viewBox ยังอยู่และต้องตรวจภาพหรือการพอดีแยก

ควรใช้ vertical-align: bottom หรือ middle? ใช้ค่าที่เหมาะกับแถวจริง Bottom ตรงกับล่างบรรทัด ส่วน middle ใช้เส้นฐานและความสูง x ของตัวแม่ ตรวจผลกับฟอนต์สุดท้ายและข้อความข้างเคียง แทนการถือว่าค่าใดคือการจัดกลางสากล

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

1. W3C — ความสูงบรรทัดและการจัดแนวตั้ง CSS — กล่องที่ร่วมอยู่ การจัดแนว และตัวพิมพ์ตัวแม่มีส่วนต่อความสูงบรรทัดอย่างไร
2. MDN — display — ความต่างระหว่างบทบาทบล็อกกับอินไลน์ในเค้าโครงตามลำดับ
3. MDN — vertical-align — การจัดเส้นฐาน ชิดล่าง และกึ่งกลาง รวมถึงกล่องที่พร็อพเพอร์ตีนี้ใช้ได้

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