SVG clipPath กับ mask: เลือกขอบคมหรือค่อยจาง

ใช้ <clipPath> ของ SVG เมื่อต้องการให้ภาพหยุดที่เส้นรอบรูปที่กำหนด ใช้ <mask> เมื่อภาพควรค่อยจางด้วยความโปร่งใสบางส่วน มาสก์ก็ตัดขอบแข็งได้ แต่พาธตัดสื่อเจตนาที่เรียบง่ายกว่าสำหรับขอบเรขาคณิตแข็ง ข้อกำหนด CSS Masking นิยามสองอย่างนี้เป็นการควบคุมการมองเห็นแยกกัน

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

เลือกตามขอบที่ต้องการ

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

เปรียบเทียบภาพเดียวภายใต้สามกฎการมองเห็น

ในการทดสอบนี้ ฉันวาดภูมิทัศน์เล็ก แปลงเป็น PNG 400 × 240 แล้ววางพิกเซลเดียวกันใต้เส้นรอบรูปคล้ายใบไม้เดียวกันทุกแผง แผงซ้ายตัดด้วยเส้นนั้น แผงกลางใช้มาสก์ความสว่างขาวถึงดำ ส่วนขวาใช้มาสก์อัลฟาทึบถึงโปร่งใส ไล่ระดับทั้งสองตั้งใจให้ค่อยจางจากซ้ายไปขวาเหมือนกัน แต่ละผลแสดงบนพื้นหลังสว่างและมืด เพื่อให้ประเมินขอบที่หายง่ายขึ้น

คอลัมน์มาสก์สองแบบดูคล้ายกันด้วยเหตุผล: ไล่ระดับความสว่างขาวถึงดำกับไล่ระดับ opacity ของสีขาวเข้ารหัสค่ามาสก์ใกล้กัน แต่ไม่ใช่ขาเข้าที่สลับแทนกันได้ ดำทึบซ่อนในมาสก์ความสว่าง แต่ดำทึบยังเผยภาพในมาสก์อัลฟา ในโหมดอัลฟา opacity ของพิกเซลกำหนดผล สีดำหรือขาวไม่เกี่ยว นิยามประมวลผลมาสก์ของ CSS Masking กำหนดการคำนวณทั้งสอง

สร้าง clip กับ mask จากเส้นรอบรูปเดียว

บันทึกเป็น clip-or-mask.svg วาง photo.png ของคุณข้างกัน แล้วให้บริการสองไฟล์จากโฟลเดอร์เดียวผ่าน HTTP ทั้งสองภาพใช้ระบบพิกัด 400 × 240 เดียวกัน ต่างเฉพาะ clip-path กับ mask

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

ID อ้างอิงต้องไม่ซ้ำภายใน SVG ทั้ง clip และ mask ใช้ userSpaceOnUse เพื่อให้พิกัดลวดลายตรงพื้นที่เฉพาะที่ 400 × 240 ของแต่ละภาพ เอกสาร <clipPath> ของ MDN อธิบายการตัดว่าเป็นการจำกัดการระบายสีโดยไม่เปลี่ยนเรขาคณิตแท้ของเป้าหมาย เอกสาร <mask> ของ MDN แยก maskUnits ที่วางบริเวณมาสก์จาก maskContentUnits ที่วางภาพภายใน

หากจะลองความสว่างแทน ทำสำเนามาสก์ด้วย ID ใหม่ ตั้ง mask-type="luminance" แล้วเปลี่ยนจุดไล่ระดับเป็นขาวทึบที่ต้นและดำทึบที่ปลาย ให้การอ้างอิง mask ตรงกับ ID ใหม่ ค่าเริ่มต้นของ <mask> SVG ใช้ความสว่าง ตัวอย่างระบุโหมดเพื่อไม่ให้การแก้ภายหลังเปลี่ยนความหมายดำโดยไม่รู้ ดูเอกสาร mask-type ของ MDN

ตรวจผลก่อนส่งออก

1. เรนเดอร์ SVG บนพื้นหลังอ่อนและมืด การจางที่แทบไม่เห็นบนขาวอาจชัดบนมืด
2. ยืนยันว่าภาพกับลวดลายใช้พิกัดเดียวกัน หากปรับเฉพาะภาพ เส้นรอบรูปอาจไม่ตรง สำหรับ clip ใช้ซ้ำกับเป้าหมายต่างขนาด คู่มือหน่วย clipPath อธิบายทางเลือกพิกัด
3. หากขอบนุ่มหยุดทันที ตรวจ x, y, width และ height ของมาสก์ร่วมกับไล่ระดับ บริเวณมาสก์ตัดภาพนอกขอบได้ ขยายไล่ระดับอย่างเดียวไม่แก้บริเวณแคบ MDN แสดงค่าเริ่มต้นบริเวณมาสก์ แต่ขอบเขตชัดตรวจง่ายกว่าในงานส่งมอบ
4. เปิด SVG ที่บันทึกในแอปที่จะใช้ใหม่ ภาพเบราว์เซอร์ถูกไม่ได้ยืนยันว่าตัวนำเข้าอื่นเก็บ clip, mask, ภาพลิงก์ หรือความแก้ไขได้ตามต้องการ
5. ตรวจโครงสร้างไฟล์ หากยังมี <image> ก็ยังมีพิกเซลราสเตอร์ แม้เส้นรอบรูปตัดเป็นเวกเตอร์ การตรวจราสเตอร์ฝัง แสดงวิธีแยก

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

PerfectVector เหมาะตรงไหน

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

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

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

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

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

การตัดหรือมาสก์เปลี่ยน PNG เป็นเวกเตอร์หรือไม่? ไม่ ทั้งสองเปลี่ยนการมองเห็นตอนเรนเดอร์ SVG ยังมี <image> ราสเตอร์ได้และอาจต้องไล่เส้นหรือแก้พาธแยกสำหรับงานส่งมอบเวกเตอร์ล้วน

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

1. W3C — CSS Masking Module ระดับ 1 — นิยามการตัด มาสก์ และค่ามาสก์อัลฟาเทียบความสว่าง
2. MDN — การตัดและมาสก์ — ตัวอย่างการตัดขอบแข็งและมาสก์นุ่ม
3. MDN — <clipPath> — พฤติกรรม clip ทางเลือกพิกัด และเรขาคณิตพื้นฐานที่ไม่เปลี่ยน
4. MDN — <mask> — บริเวณมาสก์ ระบบพิกัดเนื้อหา และพฤติกรรมอ้างอิง
5. MDN — mask-type — การตีความภาพมาสก์ SVG แบบอัลฟาและความสว่าง

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