เรียนรู้วิธีการหมุนเวียนใน SVG

ฟังก์ชันการหมุนเวกเตอร์ที่ปรับขนาดได้

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

เกี่ยวกับ Rotate

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

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

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

ไวยากรณ์หมุน

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

เปลี่ยน = "หมุน (45100100)"

มุมของการหมุนคือสิ่งแรกที่คุณเพิ่ม ในโค้ดนี้มุมของการหมุนคือ 45 องศา จุดศูนย์กลางคือสิ่งที่คุณจะเพิ่มต่อไป ที่นี่จุดศูนย์ตั้งอยู่ที่พิกัด 100, 100 ถ้าคุณไม่ป้อนพิกัดตำแหน่งกลางจะมีค่าเริ่มต้นเป็น 0.0 ในตัวอย่างด้านล่างมุมจะยังคงเป็น 45 องศา แต่เนื่องจากจุดศูนย์กลางยังไม่ได้รับการกำหนดไว้ค่าเริ่มต้นจะเท่ากับ 0.0

เปลี่ยน = "หมุน (45)"

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

เปลี่ยน = "หมุน (-45)"

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