ลำดับการวาด SVG: วางเส้นขอบหนาไว้หลังตัวอักษร

ตั้ง paint-order="stroke fill" บนองค์ประกอบข้อความหรือรูปทรง SVG เพื่อวาดเส้นรอบรูปก่อนสีเติม เมื่อสีเติมทึบ มันจะปิดส่วนเส้นขอบที่หันเข้าด้านใน ทำให้เส้นขอบหนาไม่กินพื้นที่สีด้านหน้าของตัวอักษร คุณเขียน paint-order: stroke fill; ใน CSS ได้ด้วย

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

ทำไมเส้นขอบปริยายจึงเบียดตัวอักษร

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

การสลับสองขั้นแรกให้สีเติมปิดส่วนซ้อนนั้น ข้อกำหนดการวาด SVG นิยามลำดับ และ เอกสารอ้างอิงแอตทริบิวต์ SVG ของ MDN อธิบายทั้งแอตทริบิวต์และ CSS ที่เทียบเท่า ค่าสั้น stroke มีลำดับเดียวกับ stroke fill markers การทำงานที่ละไว้ตามมาภายหลังในลำดับสัมพัทธ์ปกติ

เอฟเฟกต์นี้ต้องมีสีเติมที่มองเห็น พาธที่มี fill="none" ไม่มีอะไรระบายทับเส้นขอบด้านใน สีเติมโปร่งใสบางส่วนอาจให้เห็นเส้นขอบผ่านได้ จึงใช้สีเติมทึบสำหรับผลที่สาธิตนี้

เปรียบเทียบงานเดียวกันสองขนาด

เราสร้างโลโก้คำ BOLD สั้น ๆ ด้วยข้อความที่ยังแก้ไขได้และตราสามเหลี่ยมพาธเล็ก ภาพเปรียบเทียบเบราว์เซอร์ด้านล่างเปลี่ยนเฉพาะลำดับการวาดภายในแต่ละคู่ ใช้ความหนาเส้นขอบ 4 และ 8 หน่วยผู้ใช้ SVG แล้วแสดง viewBox 400 × 110 เดียวกันที่ความกว้าง 400 และ 200 พิกเซล CSS

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

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

นี่เป็นตัวอย่างวาดที่สร้างขึ้น ไม่ใช่ผลแปลง PerfectVector โลโก้คำใช้ฟอนต์ Arial ที่ติดตั้งพร้อม sans-serif สำรอง ฟอนต์ต่างกันเปลี่ยนรูปตัวอักษรและระยะห่าง

ลอง SVG ฉบับเต็ม

บันทึกเป็น wordmark.svg แล้วเปิดโดยตรงในเบราว์เซอร์ ตัวอย่างเผื่อพื้นที่รอบรูปทรงให้พอสำหรับเส้นขอบที่เห็น เปลี่ยน paint-order เป็น normal เพื่อเปรียบเทียบ แล้วลอง stroke-width="4"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

กลุ่มส่งต่อคุณสมบัติสีวาดให้พาธและข้อความ องค์ประกอบย่อยแต่ละตัวใช้ลำดับที่ขอสำหรับการเรนเดอร์ของตัวเอง fill-rule="evenodd" ให้ช่องเปิดภายในตราและเป็นอิสระจากลำดับการวาด

เพื่อทำซ้ำตัวอย่างเล็ก เปลี่ยน width และ height เป็น 200 กับ 55 โดยคง viewBox เพราะไฟล์นี้ไม่มีเส้นขอบที่ไม่ปรับตามมาตราส่วน งานภาพและเส้นขอบจึงปรับไปด้วยกัน เส้นขอบ 8 หน่วยกลายเป็นกว้าง 4 พิกเซล CSS ที่การแมปครึ่งขนาดนี้ ก่อนคำนึงถึงส่วนที่สีเติมซ่อน

สำหรับเวอร์ชันใช้สไตล์ชีต ให้คลาสแก่เป้าหมายแล้วตั้ง:

.outlined-wordmark {
  paint-order: stroke fill;
}

เมื่อทั้งแอตทริบิวต์การแสดงผลและคำประกาศ CSS ระบุคุณสมบัติ CSS มีลำดับความสำคัญสูงกว่า หากเปลี่ยนแอตทริบิวต์แล้วดูไม่มีผล ให้ตรวจกฎที่ใช้ เอกสารอ้างอิง CSS ของ MDN อธิบายการสืบทอดและชุดคีย์เวิร์ดที่อนุญาตด้วย

สิ่งที่การตั้งค่านี้ไม่เปลี่ยน

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

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

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

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

แยกความต่างเหล่านี้ระหว่างแก้ไข การเปลี่ยน paint-order ย้อนกลับง่าย การขยายเส้นขอบหรือแปลงตัวอักษรเป็นพาธเปลี่ยนโครงสร้างที่แก้ไขได้ของเอกสาร

ตรวจสำเนาส่งมอบในปลายทาง

เริ่มจากผลเบราว์เซอร์ แล้วเปิดไฟล์ที่บันทึกในแอปหรือตัวเรนเดอร์ที่จะใช้งาน พรีวิวเบราว์เซอร์อย่างเดียวไม่ยืนยันว่าโปรแกรมแก้ไข ตัวแปลง PDF หรือกระบวนการผลิตรักษารูปลักษณ์

1. เปรียบเทียบสีด้านหน้าและกรอบภายนอกที่ขนาดสุดท้าย ดูภายใน B, O และช่องเปิดแคบของตรา
2. ยืนยันว่าฟอนต์ที่คาดหวังโหลดแล้ว ตรวจระยะห่างรวมทั้งรูปตัวอักษร
3. ตรวจขอบหน้า เส้นขอบกว้างขึ้นอาจต้องมีพื้นที่ในวิวพอร์ตหรือพื้นที่ตัดภาพเพิ่ม
4. เปิดไฟล์ส่งมอบที่ส่งออกใหม่ การส่งออกอาจเปลี่ยนสไตล์หรือการสร้างวัตถุแม้เอกสารทำงานจะดูถูกต้อง

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

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

เมื่อต้นฉบับเป็นโลโก้ราสเตอร์

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

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

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

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

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

paint-order="stroke" ต่างจาก "stroke fill" หรือไม่? ในที่นี้ให้ลำดับเดียวกัน: เส้นขอบ สีเติม แล้วมาร์กเกอร์ การทำงานที่ไม่ระบุตามหลังรายการที่ระบุในลำดับสัมพัทธ์ปกติ

paint-order สร้างเส้นขอบด้านนอกหรือไม่? มันไม่ได้ย้ายหรือเลื่อนเส้นขอบ สีเติมทึบซ่อนส่วนที่หันเข้าด้านในของเส้นขอบกึ่งกลาง เส้นขอบที่เหลือยังเบียดช่องเปิดและช่องว่างได้

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

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

1. W3C — การวาด SVG 2 — นิยามลำดับวาดและความสัมพันธ์ระหว่างสีเติมกับเส้นขอบ
2. MDN — แอตทริบิวต์ SVG paint-order — อธิบายลำดับคีย์เวิร์ด ชนิดองค์ประกอบที่รองรับ และ CSS ที่มีความสำคัญเหนือแอตทริบิวต์การแสดงผล
3. MDN — คุณสมบัติ CSS paint-order — อธิบายการสืบทอดและลำดับคีย์เวิร์ดแบบย่อ

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