จุดกำเนิดการแปลง SVG: หมุนงานภาพรอบศูนย์กลางของมัน

หากต้องการหมุนงาน SVG รอบศูนย์กลางของตัวเองด้วย CSS ให้วางพาธที่เกี่ยวข้องในกลุ่มเดียวและใช้ transform-box: fill-box กับ transform-origin: center บนกลุ่มนั้น จากนั้นใช้การหมุนที่กลุ่ม คุณสมบัติทั้งสองตอบคำถามต่างกัน: สี่เหลี่ยมใดเป็นกรอบอ้างอิง และจุดหมุนอยู่ตรงไหนภายในสี่เหลี่ยมนั้น

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

ทำไม center เพียงอย่างเดียวยังทำให้งานภาพเคลื่อน

สำหรับองค์ประกอบย่อยของ SVG ทั่วไป เช่นพาธหรือกลุ่ม จุดกำเนิดการแปลงปริยายคือ 0 0 องค์ประกอบ SVG รากมีค่าปริยายต่างกัน เมื่อใช้ transform-box: view-box ที่เป็นค่าปริยาย การตั้งจุดกำเนิดเป็น center อ้างอิงวิวพอร์ตอ้างอิง SVG แทนขอบเขตงานภาพเอง เอกสารอ้างอิง transform-origin ของ SVG จาก MDN อธิบายทั้งค่าปริยายและข้อยกเว้นเหล่านี้

พื้นที่ว่างรอบโลโก้จึงสำคัญ สัญลักษณ์เล็กที่อยู่ใกล้มุมหนึ่งของพื้นที่วาดใหญ่มีศูนย์กลางต่างจากพื้นที่วาดนั้น transform-box: fill-box เปลี่ยนกรอบอ้างอิงเป็นกรอบครอบวัตถุขององค์ประกอบ ไม่ได้ตัด SVG หรือลบพื้นที่ว่าง เอกสารอ้างอิง transform-box นิยามกรอบที่เลือกได้ รวมทั้ง stroke-box เมื่อต้องการกรอบอ้างอิงที่รวมเส้นขอบ

หมุนสองพาธเป็นเครื่องหมายเดียว

บันทึกตัวอย่างฉบับเต็มนี้เป็น rotation.svg แล้วเปิดในเบราว์เซอร์ มันใช้สี่เหลี่ยมและสามเหลี่ยมเน้นที่แยกออกมาซึ่งเราสร้างขึ้น ทั้งสองอยู่ห่างจุดกำเนิดพิกัด CSS อยู่ภายใน SVG เพื่อให้ไฟล์เดี่ยวมีกฎหมุนของตัวเอง

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

ก่อนหมุน งานภาพรวมครอบคลุม x = 80 ถึง 220 และ y = 50 ถึง 130 กรอบกว้าง 140 หน่วยและสูง 80 หน่วย ศูนย์กลางจึงเป็น (150, 90) สี่เหลี่ยมและชิ้นเน้นรักษาความสัมพันธ์กันเมื่อกลุ่มหมุน

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

เวอร์ชันจุดกำเนิดปริยายย้ายเครื่องหมายรอบ (0, 0) เวอร์ชันกลุ่มที่จัดศูนย์กลางทั้งสองตรงกัน ในแผงสุดท้าย สี่เหลี่ยมหมุนรอบ (120, 90) ส่วนสามเหลี่ยมเน้นหมุนรอบ (195, 90) แต่ละส่วนยังอยู่ใกล้ตำแหน่งเริ่มของตัวเอง แต่เครื่องหมายไม่ได้หมุนเป็นวัตถุเดียวอีกต่อไป

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

ใช้พิกัดชัดเจนเมื่อจุดหมุนเป็นการตัดสินใจออกแบบ

แอตทริบิวต์ transform ของ SVG ระบุมุมและจุดหมุนโดยตรงได้ ในตัวอย่าง แทน <g class="artwork"> ด้วย <g transform="rotate(35 150 90)"> คงสองพาธไว้ภายใน การลบคลาสหยุด CSS transform ไม่ให้เขียนทับแอตทริบิวต์ด้วย

รูปแบบ rotate(angle cx cy) ของแอตทริบิวต์ใช้หน่วยองศาตามด้วยจุดหมุนในระบบพิกัดผู้ใช้ปัจจุบัน CSS rotate(35deg) มีไวยากรณ์ต่างกันและรับจุดกำเนิดจากคุณสมบัติแยก หากทั้ง CSS transform และแอตทริบิวต์ transform ของ SVG ใช้กับองค์ประกอบเดียวกัน CSS มีลำดับความสำคัญสูงกว่า ดู เอกสารอ้างอิงแอตทริบิวต์ transform ของ MDN

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

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

อ่านขอบเขตก่อนคำนวณศูนย์กลาง

สำหรับกลุ่มธรรมดาแบบตัวอย่างนี้ การคำนวณศูนย์กลางคือ:

cx = x + width / 2
cy = y + height / 2

ในการวัดเบราว์เซอร์ของเรา getBBox() ของกลุ่มคืน x: 80, y: 50, width: 140 และ height: 80 การหมุนของตัวกลุ่มเองไม่เปลี่ยนค่ากรอบเฉพาะตัวเหล่านั้น เอกสาร getBBox แยกค่าพื้นที่ผู้ใช้เหล่านี้จาก getBoundingClientRect() ซึ่งสี่เหลี่ยมอ้างอิงวิวพอร์ตเบราว์เซอร์

สำหรับกรอบเลือกวัตถุหรือ viewBox ที่จัดพอดี กระบวนการกรอบครอบ SVG แสดงวิธีแปลงระหว่างระบบพิกัดและตรวจระยะเผื่อเส้นขอบ

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

ศูนย์กลางกรอบไม่ใช่ศูนย์กลางที่มองเห็นเสมอ

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

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

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

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

เตรียมต้นฉบับก่อนตั้งจุดหมุน

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

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

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

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

ทำไม transform-origin: center จึงหมุน SVG รอบผืนภาพ? สำหรับองค์ประกอบย่อยของ SVG ที่ใช้กรอบอ้างอิง view-box ปริยาย center อ้างอิงวิวพอร์ตอ้างอิง SVG ตั้ง transform-box เป็น fill-box บนองค์ประกอบที่จะหมุนหากต้องการกรอบครอบวัตถุแทน

ควรหมุนกลุ่มหรือแต่ละพาธ? หมุนกลุ่มเมื่อชิ้นส่วนควรเคลื่อนเป็นเครื่องหมายเดียว การใช้ fill-box และ center กับแต่ละพาธให้แต่ละชิ้นมีจุดหมุนของตัวเอง ซึ่งเปลี่ยนการจัดวางรวม

fill-box center ทำให้โลโก้ไม่สมมาตรดูสมดุลหรือไม่? มันเลือกศูนย์กลางกรอบครอบวัตถุ ความสมดุลที่เห็นอาจต้องใช้จุดหมุนต่างออกไป จึงควรตรวจโลโก้หลายมุมและเลือกพิกัดชัดเจนเมื่อจำเป็น

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

1. MDN — SVG transform-origin — นิยามจุดกำเนิด SVG ปริยาย ข้อยกเว้นองค์ประกอบราก และความสัมพันธ์กับกรอบอ้างอิง
2. MDN — transform-box — นิยามกรอบอ้างอิงวัตถุ เส้นขอบ และวิวพอร์ต
3. MDN — SVG transform — อธิบายพิกัดการหมุนชัดเจน การแปลงกลุ่ม และลำดับความสำคัญ CSS
4. MDN — getBBox — อธิบายการวัดรูปทรงเฉพาะตัวและความต่างจากสี่เหลี่ยมวิวพอร์ต

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