หน่วยแพตเทิร์น SVG: รักษาขนาดลวดลายซ้ำให้ถูกต้อง

หากต้องการรักษาระยะซ้ำของแพตเทิร์น SVG ให้คงที่ขณะเปลี่ยนขนาดรูปทรง ให้ใช้ patternUnits="userSpaceOnUse" และความกว้างสูงไทล์ที่เป็นตัวเลข ควบคุมงานภาพภายในไทล์แยกด้วย patternContentUnits หรือ viewBox ของแพตเทิร์น

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

หากลวดลายเป็นพาธ SVG อยู่แล้ว ให้เก็บพาธเหล่านั้น การแปลงเป็นเวกเตอร์อยู่ก่อนหน้าในกระบวนการ เมื่อต้นฉบับมีเพียงภาพราสเตอร์

แยกไทล์ออกจากงานภาพภายใน

แพตเทิร์นมีไทล์สี่เหลี่ยมที่ทำซ้ำและเนื้อหาที่วาดภายใน patternUnits ควบคุม x, y, width และ height ของไทล์ patternContentUnits ควบคุมพิกัดเนื้อหา เว้นแต่แพตเทิร์นมี viewBox

เมื่อใช้ objectBoundingBox ความกว้าง .25 หมายถึงหนึ่งในสี่ของความกว้างกรอบครอบวัตถุที่ระบายสี ไม่ใช่หนึ่งในสี่ของความกว้างลวดลาย สี่เหลี่ยมกว้าง 120 หน่วยได้ไทล์ 30 หน่วย สี่เหลี่ยมกว้าง 240 หน่วยได้ไทล์ 60 หน่วย

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

เปรียบเทียบใบไม้เดียวกันสี่แบบ

เราวาดพาธใบไม้สำหรับตัวอย่างนี้และเรนเดอร์ SVG ในเบราว์เซอร์ สี่เหลี่ยมเป้าหมายทั้งสองสูง 80 หน่วยและกว้าง 120 กับ 240 ภาพหน้าจอเพิ่มป้ายกำกับและพื้นหลังรอบรูปทรงต้นฉบับเหล่านั้น นี่เป็นการสาธิต SVG ไม่ใช่ผลแปลง PerfectVector

อ่านแถวจากบนลงล่าง:

1. ไทล์คงที่ 40 × 40 ให้สามคอลัมน์ในสี่เหลี่ยมแคบและหกในสี่เหลี่ยมกว้าง ขนาดใบไม้คงเดิม
2. ความกว้างไทล์ .25 รักษาสี่คอลัมน์ในทั้งสองเป้าหมาย สี่เหลี่ยมกว้างมีช่องว่างระหว่างใบไม้มากกว่าเพราะพิกัดใบไม้ยังใช้หน่วยผู้ใช้
3. พิกัดเนื้อหาแบบกรอบครอบยืดใบไม้แนวนอนเมื่อความกว้างเป้าหมายเพิ่มสองเท่า ขนาดแนวตั้งคงเดิมเพราะความสูงเป้าหมายไม่เปลี่ยน
4. ไทล์คงที่ 40 × 40 พร้อม viewBox="0 0 40 40" กลับให้ผลเหมือนแถวแรก แม้ patternContentUnits="objectBoundingBox" ยังอยู่ในมาร์กอัป viewBox ของแพตเทิร์นมีลำดับความสำคัญเหนือกว่า

เปิดตัวอย่างฉบับเต็ม

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

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

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

ใช้ viewBox เมื่อลวดลายมีพิกัดของตัวเอง

viewBox ของแพตเทิร์นให้ใบไม้คงพื้นที่วาดที่คุ้นเคยขณะที่ไทล์มีขนาดแยก ข้อกำหนดแพตเทิร์น SVG จัดพื้นที่วาดนั้นให้พอดีในไทล์ด้วย viewBox และ preserveAspectRatio

ในแถวสุดท้าย ทั้งไทล์และ viewBox เป็น 40 × 40 จึงไม่มีอัตราส่วนไม่ตรงกัน หากต่อมาทำไทล์เป็นสี่เหลี่ยมผืนผ้า ค่า preserveAspectRatio="xMidYMid meet" ปริยายจะรักษาสัดส่วนลวดลายและจัดพื้นที่วาดที่พอดีไว้กึ่งกลาง preserveAspectRatio="none" อนุญาตให้ปรับมาตราส่วนแนวนอนกับแนวตั้งแยกกัน เลือกเฉพาะเมื่อตั้งใจให้ผิดสัดส่วน

การเปลี่ยน patternContentUnits ไม่แก้ขนาดขณะที่มี viewBox ของแพตเทิร์น แอตทริบิวต์นั้นไม่มีผลในกรณีนี้ เปลี่ยนขนาดไทล์ viewBox หรือกฎอัตราส่วนตามส่วนที่ควรเปลี่ยน

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

เปลี่ยนขนาดสี่เหลี่ยมต่างจากปรับมาตราส่วนกลุ่ม

userSpaceOnUse ตรึงระยะในพิกัดผู้ใช้ ไม่ใช่พิกเซลหน้าจอถาวร การแปลงปรับมาตราส่วนพิกัดเหล่านั้นได้ รวมทั้งลายเติม

เราเปิดสองเวอร์ชันที่ใช้คำจำกัดความ fixed ด้านบนด้วย สี่เหลี่ยมแรกมี width="240" ส่วนที่สองคง width="120" ภายในกลุ่มที่มี transform="translate(20 120) scale(2 1)" ทั้งสองกินพื้นที่หน้าจอ 240 หน่วยในเอกสารนั้น แต่แบบแรกแสดงใบไม้หกคอลัมน์ ส่วนแบบผ่านการแปลงแสดงสามคอลัมน์ที่ยืดแนวนอน

ใช้ความต่างนี้เมื่อแก้ปัญหางานภาพตอบสนองต่อขนาด:

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

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

เตรียมลวดลายที่ออกแบบเองก่อนทำซ้ำ

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

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

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

ก่อนส่งไฟล์ ตรวจว่า fill="url(#...)" ทุกค่าอ้างอิง ID แพตเทิร์นที่มีอยู่และไม่ซ้ำ ไทล์มีขนาดบวก และลวดลายพอดีกับไทล์ที่ตั้งใจ SVG แพตเทิร์นปกติตัดเนื้อหาที่ขอบไทล์ ดังนั้นใบไม้ที่ข้ามขอบต้องออกแบบการซ้ำอย่างตั้งใจแทนการสมมติว่าส่วนล้นจะแสดง

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

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

ทำไม patternContentUnits ดูเหมือนไม่มีผล? ตรวจว่ามี viewBox บนแพตเทิร์นหรือไม่ เมื่อมี มันกำหนดการแมปพิกัดเนื้อหาและ patternContentUnits ไม่มีผล

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

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

1. MDN — patternUnits — นิยามพิกัดรูปทรงไทล์และค่าปริยายกรอบครอบ
2. MDN — patternContentUnits — นิยามพิกัดเนื้อหาและ viewBox ที่มีผลเหนือกว่า
3. W3C — แพตเทิร์น SVG — อธิบายการจัดไทล์ให้พอดี พฤติกรรมอัตราส่วน และการตัดแพตเทิร์น
4. W3C — ระบบพิกัด SVG — นิยามการแปลงพิกัดผู้ใช้เบื้องหลังการปรับมาตราส่วนกลุ่ม

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