Mask CSS ของ SVG: เก็บขอบรูปและกำหนดสี

Mask CSS ของ SVG ควบคุมว่าส่วนใดขององค์ประกอบยังมองเห็น สำหรับไอคอนสีเดียว ใช้รูปเงาของ SVG เป็น mask และลงสีองค์ประกอบด้วย background-color: currentColor จากนั้นสีที่เห็นของไอคอนมาจาก CSS แทนการแสดงชุดสีต้นฉบับของ SVG

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

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

ใช้ mask เมื่อต้องการรูปเงาที่ลงสีเดียว

พิจารณาไอคอนที่คั่นหนังสือซึ่งมีช่องเปิดรูปเพชรและแถบคอรัลเล็ก ในภาพ SVG ปกติมันมีสองสี เมื่อเป็น alpha mask บนองค์ประกอบสีน้ำเงิน งานทึบทำให้สีน้ำเงินปรากฏ แถบคอรัลไม่แสดงเป็นสีแยกอีกต่อไป

นี่มีประโยชน์กับไอคอนอินเทอร์เฟซที่เปลี่ยนตามธีม แต่เป็นตัวเลือกส่งมอบที่ไม่เหมาะกับภาพประกอบซึ่งความแตกต่างของสีสื่อความหมาย

หากต้องแก้สีเติมและเส้นขอบ SVG แต่ละส่วน ใช้ คู่มือแก้สี SVG Mask มีประโยชน์เมื่อรูปเงาเป็นส่วนที่นำกลับใช้ซ้ำ สำหรับขอบเขตรูปทรงคมชัด ให้ ปรับ clip SVG กำหนดเองให้พอดีเป้าหมาย และเลือกระหว่างยืดรูปเงากับรักษาสัดส่วน

เตรียมต้นฉบับเล็กที่มีช่องเปิดจริง

บันทึกตัวอย่างต้นฉบับนี้เป็น bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

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

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

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

ลงสีองค์ประกอบไอคอนด้วย CSS

วาง icon.css ข้าง SVG และใช้กฎเหล่านี้:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

ใช้ป้ายกำกับที่มองเห็นบนปุ่ม:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

ในที่นี้ไอคอนอยู่กับ “Save article” จึงซ่อนจากต้นไม้การเข้าถึงแทนการซ้ำป้ายกำกับ ตัวอย่างแสดงเพียงการนำเสนอ เชื่อมปุ่มกับการบันทึกของแอปแยกต่างหาก

องค์ประกอบต้องมีกล่องให้ลงสี จึงกำหนดความกว้าง ความสูง และ display ใน CSS currentColor ใช้สีข้อความของมัน การเปลี่ยน color ของปุ่มเปลี่ยนสีไอคอนโดยไม่เขียน bookmark.svg ใหม่

เอกสารอ้างอิง mask-size นิยาม contain ว่าปรับภาพ mask ทั้งหมดให้พอดีโดยรักษาสัดส่วน เมื่อรวมการจัดกลางและไม่ทำซ้ำ ต้นทางจะอยู่ในกล่องไอคอนเดียวที่คาดเดาได้ คู่มือ mask ของ web.dev อธิบายตัวควบคุมขนาดและการทำซ้ำเหล่านี้

ให้บริการตัวอย่างผ่าน HTTP รวมถึงเมื่อทดสอบในเครื่อง คำอธิบาย mask-image ของ MDN เตือนว่าไม่รับภาพต้นทาง file:// ในเครื่องสำหรับการใช้นี้ ภาพ mask ที่หายหรือโหลดล้มเหลวอาจทำให้องค์ประกอบที่ถูก mask มองไม่เห็น

แยกภาพ SVG ออกจากองค์ประกอบ mask ของ SVG

ไฟล์ SVG ที่ใช้เป็นภาพกับการอ้างอิงองค์ประกอบ SVG <mask> เป็นอินพุตต่างกัน อย่าเลือกโหมดเพียงเพราะชื่อไฟล์ลงท้ายด้วย .svg

เอกสารอ้างอิง mask-mode ระบุค่าเริ่มต้นที่ขึ้นกับต้นทางนี้ ในการตีความ alpha ทั้งดำทึบและขาวทึบเผยองค์ประกอบ ใน luminance ขาวทึบเผยและดำซ่อน ค่าระหว่างกลางให้การมองเห็นบางส่วนได้

mask-type ใช้กับองค์ประกอบ SVG <mask> และมีค่าเริ่มต้นเป็น luminance ตาม เอกสารอ้างอิง mask-type การเพิ่มให้ span ไอคอนปกติไม่เปลี่ยนการตีความ mask ภาพ ใช้ mask-mode บนองค์ประกอบที่ถูก mask เมื่อต้องระบุพฤติกรรมนั้น

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

วินิจฉัยสี่เหลี่ยม ไอคอนหาย หรือช่องเปิดที่ถูกเติม

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

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

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

ตัดสินผลที่ขนาดคอมโพเนนต์

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

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

สำหรับชุดไอคอน เปรียบเทียบสัญลักษณ์ข้างกันที่ขนาด CSS เดียวกัน viewBox อาจมีพื้นที่ว่างต่างกัน ทำให้กล่องเท่ากันดูไม่สม่ำเสมอ คู่มือเตรียมไอคอนชุด UI อธิบายงานความสม่ำเสมอนั้น

กู้รูปเงาแรสเตอร์เฉพาะเมื่อต้นทางจำเป็น

PNG โปร่งใสเป็น mask CSS ได้อยู่แล้ว การแปลง SVG ไม่ใช่ข้อกำหนดของ mask เก็บเวกเตอร์สะอาดที่มีอยู่เมื่อหาได้

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

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

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

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

Mask SVG เก็บสีเดิมหรือไม่? Mask ควบคุมการมองเห็น ในตัวอย่างพื้นหลังสีเดียว องค์ประกอบให้สีเดียว จึงไม่เก็บสีแยกของต้นฉบับ

ทำไมไอคอนกลายเป็นสี่เหลี่ยมทึบ? ตรวจพื้นหลังทึบเต็มขนาดในต้นทาง mask ภายใต้ alpha ทั้งขาวทึบและดำทึบเผยองค์ประกอบ

Mask SVG เป็น luminance เสมอหรือไม่? ไม่ ภาพ SVG ปกติโดยทั่วไปใช้ alpha ภายใต้ match-source องค์ประกอบ mask SVG ใช้ luminance เป็นค่าเริ่มต้น เว้นแต่เปลี่ยนการตีความ

ต้องแปลง PNG โปร่งใสเป็น SVG หรือไม่? ไม่ PNG เป็นภาพ mask ได้ การแปลงเป็นเวกเตอร์เป็นทางเลือกเมื่อต้องกู้หรือแก้รูปเงาที่เหมาะจากต้นทางแรสเตอร์

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

1. MDN — mask-image — ภาพต้นทาง การโหลดล้มเหลว ข้อกำหนดเซิร์ฟเวอร์ในเครื่อง และการมองเห็น
2. MDN — mask-mode — Alpha, luminance และค่าเริ่มต้นตามต้นทาง
3. MDN — mask-type — การตีความองค์ประกอบ mask SVG
4. MDN — mask-size — ขนาดแบบ contain และสัดส่วนภาพ
5. web.dev — ใส่เอฟเฟกต์ภาพด้วย CSS mask-image — Mask ภาพ ขนาด และการทำซ้ำ

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