แปลงลาย SVG: หมุนสีเติมโดยเก็บเส้นขอบเดิม

หากต้องการหมุนลาย SVG ภายในรูปทรงคงที่ ให้ใส่ patternTransform="rotate(...)" บนองค์ประกอบ pattern คงการแปลงของรูปเองไว้ หากต้องการเลื่อนตำแหน่งภาพซ้ำ ให้ใช้การเลื่อนบนลายเดียวกันแทน

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

เลือกองค์ประกอบที่ควรเคลื่อน

เอกสาร patternTransform ปัจจุบัน อธิบายรายการแปลงที่ใช้กับช่องลาย นิยามลาย SVG2 อธิบายระบบพิกัดช่องและการแปลงสี

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

เราใช้แอตทริบิวต์ SVG โดยตรง หมายเหตุ MDN เรื่องการรองรับ CSS transform ไม่ได้รับปากว่าพร็อพเพอร์ตี CSS ชื่อ pattern-transform จะใช้ได้ที่ปลายทาง

หมุนสีภายในเส้นขอบ

เปิดตัวอย่างหมุนสีครบชุด

บันทึก SVG นี้เป็น pattern-emblem.svg แล้วเปิดในเบราว์เซอร์ อยู่ครบในตัว ไม่พึ่งภาพหรือไลบรารีภายนอก ลายหมุน 30 องศารอบจุดต้นทาง (100,80) ส่วนกลุ่มรับไม่มีการแปลง

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

กฎเติม evenodd เว้นสี่เหลี่ยมในเป็นช่อง ดูเอกสาร fill-rule สำหรับกฎอิงการตัดผ่าน ช่องเป็นส่วนของเส้นตรา การหมุนสีซ้ำจึงไม่หมุนช่องนั้น

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

เทียบการหมุน การเลื่อน และตัวควบคุมรูปทรง

ทำสำเนาตัวอย่างสามไฟล์และเปลี่ยนเฉพาะแอตทริบิวต์ที่ระบุ:

1. สำหรับสีเดิม ลบ patternTransform จากลาย
2. สำหรับสีเลื่อน แทนด้วย patternTransform="translate(7 5)"
3. สำหรับตัวควบคุมทั้งวัตถุ ลบการแปลงลายและเพิ่ม transform="rotate(20 100 80)" ให้กลุ่มรับ g

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

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

เริ่มหนึ่งการแปลงเมื่อวินิจฉัยผล หากรวมหมุน เลื่อน และปรับขนาดภายหลัง ให้ตรวจลำดับในคู่มือลำดับแปลง SVG การรวมเพิ่มปัญหาพิกัดอีกเรื่องที่การเทียบควบคุมนี้หลีกเลี่ยง

ตรวจรูปทรงกับพิกเซลแยกกัน

เราเรนเดอร์ต้นฉบับสี่แบบใน Chrome ที่ 200×160 และ 400×320 พิกเซล CSS device pixel ratio เป็น 2 แต่ละต้นฉบับยังถูกถอดรหัสและวาดลง canvas ที่ขนาดบัฟเฟอร์ตรงขนาดทดสอบ เพื่ออ่านพิกเซลโดยไม่พึ่งภาพหน้าจอ

ทุกไฟล์มีสตริง d ตราเดิมกับเส้นลายเดิม รวมสององค์ประกอบเส้นและไม่มีภาพ แฮชไฟล์เต็มต่างกันเพราะการแปลงต่างกัน กรอบรูปทรงเฉพาะที่ของตราคือ (30,25,140,110) ทุกกรณี

กรอบเฉพาะที่อย่างเดียวจะไม่จับการเปลี่ยนทั้งวัตถุ สำหรับตราหลายเหลี่ยมนี้ เรายังแปลงจุดนอกห้าจุดผ่านเมทริกซ์เบราว์เซอร์จริงแล้ววัดขอบเขตแสดง ตารางปรับ viewport ใหญ่กลับเป็นหน่วยต้นฉบับ:

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

แบบที่เปลี่ยนเฉพาะสีมีบัฟเฟอร์พิกเซล canvas เต็มต่างจากเดิมทุกขนาด ที่จุดต้นทาง (45,45) ตัวอย่างเดิมเป็นพื้นช่อง (244,240,228) ส่วนแบบหมุนสีเป็นลายดินเผา (193,90,56) ทั้งคู่มีอัลฟา 255 การเลื่อนไม่เปลี่ยนจุดนั้นแม้บัฟเฟอร์รวมต่าง จุดตัวอย่างเดียวอาจพลาดการเลื่อนสี

ที่ต้นทาง (85,80) ช่องมีอัลฟาศูนย์ทั้งแปดกรณี ขอบเขตพิกเซลทึบเต็มก็ไม่เปลี่ยนสำหรับสามแบบตั้งตรงในแต่ละขนาด ขอบเขตพิกเซลผ่านเกณฑ์นั้นไม่ใช่การวัดเดียวกับขอบเขตจุดเส้นขอบตรงค่า ข้อสังเกตจำกัดตามต้นฉบับและเบราว์เซอร์ของเรา ไม่ใช่ใบรับรองความเข้ากันได้ของตัวเรนเดอร์

ตรวจไฟล์ปลายทางที่บันทึกก่อนส่ง

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

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

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

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

patternTransform เปลี่ยนข้อมูลเส้นตราหรือไม่? ในตัวอย่างนี้มันแปลงสีลาย สตริง d ของตราไม่เปลี่ยน ตรวจกลุ่มรับกับการแปลงบรรพบุรุษด้วย เพราะรูปทรงแสดงเคลื่อนได้โดยไม่เปลี่ยน d

เลื่อนลายโดยไม่หมุนได้หรือไม่? ได้ แบบ translate(7 5) เลื่อนตำแหน่งสีโดยคงทิศลาย คงขนาดช่องและรูปทรงรับไว้เมื่อทดสอบผล

ทำไมลายหมุนตามเมื่อหมุนทั้งกลุ่ม? การแปลงกลุ่มเปลี่ยนรูปทรงรับที่แสดงกับสีของมัน เป็นคนละงานกับการใส่การแปลงเฉพาะองค์ประกอบ pattern

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

แหล่งข้อมูล

1. MDN — patternTransform — รายการแปลงลายและหมายเหตุการรองรับแอตทริบิวต์
2. W3C — ลาย SVG2 — ระบบพิกัดช่องและการแปลงสี
3. MDN — fill-rule — ช่องแบบคู่คี่ในเส้นรับ
4. MDN — transform — การหมุนรูปทรงกลุ่มที่แสดง
5. MDN — patternUnits — ระบบพิกัดช่องชัดเจนที่คงไว้ในการเทียบ