จัดแนวเส้นขอบ SVG: วางขอบด้านในหรือด้านนอก

เส้นขอบ SVG อยู่กึ่งกลางพาธ หากต้องการให้ขอบกว้าง 12 หน่วยอยู่ ด้านใน รูปทรงปิดทั้งหมด ให้วาดเส้นขอบ 24 หน่วยแล้วตัดด้วยรูปทรงนั้น หากต้องการความกว้างที่เห็นเท่ากันอยู่ ด้านนอก ให้วาดเส้นขอบ 24 หน่วยผ่านมาสก์ที่ซ่อนภายในรูปทรง เก็บสำเนาพาธต้นฉบับไว้: clip และ mask เปลี่ยนสิ่งที่เห็น ไม่ใช่เรขาคณิตพื้นฐาน

พร็อพเพอร์ตี stroke-alignment ที่เสนออยู่ในร่างบรรณาธิการ SVG Strokes แต่ร่างระบุว่านิยามเส้นขอบ SVG 2 ยังเป็นข้อกำหนดหลัก สำหรับไฟล์ที่ต้องใช้ข้ามเบราว์เซอร์และโปรแกรมแก้ไข ให้สร้างและทดสอบภาพที่เห็นแทนการพึ่งพร็อพเพอร์ตีที่เสนอ

ดูว่าขอบที่ระบายสีอยู่ตรงไหน

ตราปิดต้นฉบับนี้ใช้พาธเดียวทั้งสามแผง สีเติมเขียวอมฟ้า ขอบที่ตั้งใจให้เห็นกว้าง 12 หน่วย และพื้นที่เอกสารรอบ ๆ คงเดิม เส้นประคอรัลเป็นพาธกึ่งกลาง ในแผงกลางตรงกับขอบ ด้านนอก ของแถบน้ำเงิน ส่วนด้านขวาตรงกับขอบ ด้านใน

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

สร้างขอบด้านในด้วย clip

ใส่พาธปิดใน <defs> ใช้ซ้ำครั้งหนึ่งเป็นสีเติมและอีกครั้งเป็น clip ระบายสำเนาที่สองด้วยเส้นขอบกว้างสองเท่าที่ต้องการ แล้วจำกัดให้เหลือภายในพาธ clip ทำให้ทุกอย่างนอกทรงมองไม่เห็น ไม่ได้ลบครึ่งเส้นขอบที่ซ่อน ดูเอกสาร clipPath ของ MDN และคู่มือพิกัด clipPath ของเราหาก clip นำเข้าเลื่อนจากภาพ

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

เส้นขอบ 24 หน่วยตามปกติยื่น 12 หน่วยแต่ละด้าน clip ลบครึ่งนอก เหลือแถบที่เห็นด้านใน 12 หน่วย วางสีเติมใต้เส้นขอบที่ตัดดังตัวอย่าง หากต้องการให้แถบในเห็นครบ สำหรับพาธประกอบที่มีรู ตรวจ fill rule และ clip rule ก่อนคิดว่าฝั่งใดเป็นภายใน

สร้างขอบด้านนอกด้วย mask

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

เช่นเดิม เส้นขอบกึ่งกลาง 24 หน่วยเหลือเพียงครึ่งหนึ่ง แถบนอกที่เห็นจึงกว้าง 12 หน่วย ตั้งบริเวณมาสก์อย่างตั้งใจ MDN อธิบาย ว่า maskUnits, maskContentUnits และขนาดบริเวณมีผลอย่างไร สี่เหลี่ยมขาวต้องครอบคลุมเส้นขอบนอกทั้งหมด มาสก์เล็กเกินอาจตัดขอบที่ตั้งใจรักษา

มีเทคนิคภาพที่สั้นกว่าสำหรับสีเติม ทึบ: ระบายเส้นขอบกว้างสองเท่า แล้วเติมสีทับด้วย paint-order="stroke fill" วิธีนี้ซ่อนครึ่งในใต้สีเติม แต่เส้นขอบยังอยู่และอาจกลับมาเห็นเมื่อสีเติมโปร่งแสงหรือถูกลบ MDN อธิบายลำดับระบายสี ใช้มาสก์ชัดเจนเมื่อแถบนอกต้องเป็นโครงสร้างที่เห็นแยก สำหรับขอบที่ได้จากรูปเงาอัลฟาหลายสีทั้งภาพ ดูขอบสัณฐานวิทยา SVG ฟิลเตอร์นั้นเปลี่ยนรูปลักษณ์โดยรักษาพาธต้นทาง

ตรวจ SVG หลังนำเข้า

clip และ mask กระทบการเรนเดอร์ แต่แอปถัดไปอาจต้องการเส้นรอบรูปเติมสี เก็บไฟล์หลักแก้ได้และทดสอบสำเนาส่งมอบในเป้าหมายจริง:

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

หากเส้นหายตอนส่งออก ใช้รายการตรวจการมองเห็นเส้นขอบ เพื่อแยกสีหาย การตัด และการรองรับนำเข้า หากเส้นขอบบังสีเติมผิดคาด คำอธิบาย paint-order ของ SVG แสดงว่าชั้นใดวาดสุดท้าย

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

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

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

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

SVG รองรับการจัดเส้นขอบด้านในหรือด้านนอกหรือไม่? ร่างบรรณาธิการ SVG Strokes อธิบายค่าเหล่านั้น แต่ระบุว่า SVG 2 ยังเป็นนิยามหลักของเส้นขอบ สำหรับงานส่งมอบที่ใช้ข้ามโปรแกรม ใช้ clip หรือ mask ที่ทดสอบแล้วแทนการพึ่งพร็อพเพอร์ตีร่าง

ทำไมต้องเพิ่มความกว้างเส้นขอบเป็นสองเท่า? เส้นขอบปกติอยู่ครึ่งหนึ่งแต่ละด้านของพาธ clip หรือ mask ทิ้งครึ่งหนึ่ง เส้นขอบ 24 หน่วยจึงเหลือแถบในหรือนอกที่เห็น 12 หน่วยในตัวอย่างเหล่านี้

clip ในหรือ mask นอกสร้างเส้นรอบรูปพร้อมตัดหรือไม่? ไม่ มันเปลี่ยนรูปลักษณ์ที่เรนเดอร์ แต่พาธกับเส้นขอบพื้นฐานยังอยู่ หากเครื่องตัดหรือผู้ผลิตต้องการเส้นรอบรูปเติมสี ทำสำเนาส่งมอบแยก แปลงเส้นขอบเป็นพาธในโปรแกรมเหมาะสม แล้วตรวจเรขาคณิตหลังนำเข้า

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

1. MDN — สีเติมและเส้นขอบ — นิยามการเรนเดอร์เส้นขอบกึ่งกลางและพฤติกรรม paint-order ที่กล่าวถึง
2. W3C SVG Working Group — ร่างบรรณาธิการ SVG Strokes — ระบุค่าจัดแนวที่เสนอและสถานะร่างเทียบกับ SVG 2
3. MDN — องค์ประกอบ clipPath — นิยามการจำกัดการมองเห็นของโครงสร้างด้านใน
4. MDN — องค์ประกอบ mask — นิยามบริเวณมาสก์และแอตทริบิวต์พิกัดที่ใช้ด้านนอก
5. Alex Chan — วาดเส้นขอบด้านใน/นอกใน SVG — สาธิตวิธีเส้นขอบกว้างสองเท่าร่วม clip และ mask ที่ใช้เป็นจุดเริ่มต้นของตราต้นฉบับเรา

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