การสลายตัวของวงกลม SVG ไปยังเส้นทาง

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

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

ก่อนอื่น (หวังว่าคุณจะเคยเห็นวงกลมพื้นฐานใน SVG มาก่อน) นี่คือปากกาที่แสดงวงกลมหนึ่งอัน:

วงกลมสามารถทำได้หลายอย่าง: วงกลมสามารถเคลื่อนไหวและมีสีต่างๆ ได้ ยังคงมีสองสิ่งที่ดีมากที่คุณไม่มีวงกลมทำใน SVG 1.1: คุณไม่สามารถทำให้องค์ประกอบกราฟิกอื่นเคลื่อนที่ไปตามเส้นทางของวงกลม (โดยใช้องค์ประกอบ animateMotion ) และคุณไม่สามารถกำหนดข้อความตามเส้นทางของวงกลมได้ (สิ่งนี้จะ จะได้รับอนุญาตหลังจากปล่อย SVG 2.0 แล้วเท่านั้น)

เปลี่ยนวงกลมของเราให้เป็นเส้นทาง

มีเครื่องมือออนไลน์เล็กๆ น้อยๆ ที่สามารถช่วยคุณสร้างเส้นทางออกจากแวดวง (คุณสามารถลองใช้ได้ที่นี่) แต่เราจะสร้างทุกอย่างตั้งแต่เริ่มต้น เพื่อให้เราสามารถค้นหาว่าจริงๆ แล้วเกิดอะไรขึ้นเบื้องหลัง

ในการสร้างเส้นทางวงกลม เราจะสร้างส่วนโค้งสองส่วน นั่นคือ ครึ่งวงกลมที่ทำให้วงกลมสมบูรณ์ในเส้นทางเดียว ตามที่คุณอาจสังเกตเห็นใน SVG ด้านบน คุณลักษณะ CX , CY และ R จะกำหนดตำแหน่งที่วงกลมถูกวาดตามแกน X และ Y ในขณะที่ R กำหนดรัศมีของวงกลม CX และ CY สร้างจุดศูนย์กลางของวงกลม ดังนั้นวงกลมจึงถูกวาดรอบจุดนั้น

การจำลองวงกลมนั้นอาจมีลักษณะดังนี้:

 <path d=" M (CX - R), CY a R,R 0 1,0 (R * 2),0 a R,R 0 1,0 -(R * 2),0 " />

โปรดทราบว่า CX เหมือนกับแอตทริบิวต์ cx ของวงกลม เช่นเดียวกับ CY และแอตทริบิวต์ cy ของวงกลม เช่นเดียวกับ R และแอตทริบิวต์ r ของวงกลม อักขระ a เล็กใช้เพื่อกำหนดส่วนของส่วนโค้งรูปวงรี คุณสามารถใช้ตัวเลือก Z (หรือ z ) เพื่อปิดเส้นทาง

อักษรตัวพิมพ์เล็ก a หมายถึงจุดเริ่มต้นของส่วนโค้งรูปวงรีซึ่งวาดโดยเทียบกับตำแหน่งปัจจุบัน — หรือในกรณีเฉพาะของเรา:

 <path d=" M 25, 50 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 " />

คุณสามารถเห็นความมหัศจรรย์เกิดขึ้นในปากกานี้:

ซ่อนอยู่ใต้เส้นทางเป็นวงกลมที่มีสีแดง ในขณะที่คุณเล่นกับค่าของเส้นทาง คุณจะเห็นวงกลมนั้นตราบเท่าที่เส้นทางนั้นครอบคลุมวงกลมทั้งหมด (เส้นทางนั้นเป็นวงกลมที่มีขนาดเท่ากัน) และเราจะรู้ว่าเรากำลังทำสิ่งที่ถูกต้อง .

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

คุณสามารถลองใช้ปากกาด้านบนนี้ได้โดยนำ a ที่สองออกจากเส้นทาง:

 a 25,25 0 1,1 50,0 25,25 0 1,1 -50,0

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

เส้นทางนี้ทำงานอย่างไร

อันดับแรก เราย้ายไปยังพิกัด X,Y ในตำแหน่งที่แน่นอนในภาพ มันไม่ได้วาดอะไรที่นั่น - มันแค่เคลื่อนที่ไปที่นั่น โปรดจำไว้ว่าสำหรับองค์ประกอบวงกลม CX นั้น CY หมายถึงจุดศูนย์กลางของวงกลม แต่เมื่อมันเกิดขึ้นในส่วนโค้งรูปวงรี CX และ CY ที่แท้จริงของส่วนโค้งจะถูกคำนวณจากคุณสมบัติอื่นๆ ของส่วนโค้งนั้น

กล่าวอีกนัยหนึ่งถ้าเราต้องการให้ CX ของเราอยู่ที่ 50 และรัศมีของเราคือ 25 จากนั้นเราต้องย้ายไปที่ 50 - 25 (แน่นอนว่าถ้าเราวาดจากซ้ายไปขวา) ซึ่งหมายความว่าส่วนโค้งแรกของเราดึงมาจาก 25 X, 50 Y ซึ่งส่งผลให้ส่วนโค้งแรกของเราคือ 25,25 0 1,0 50,0

ลองแยกดูว่าค่า 25,25 0 1,0 50,0 ของส่วนโค้งของเราหมายถึงอะไร:

• 25 : รัศมี X สัมพัทธ์ของส่วนโค้ง
• 25 : รัศมี Y สัมพัทธ์ของส่วนโค้ง
• 0 1,0 : ฉันจะไม่พูดถึงค่ากลางสามค่า (คุณสมบัติการหมุน ค่าสถานะส่วนโค้งขนาดใหญ่ และค่าสถานะธงกวาด) เพราะค่าเหล่านี้ไม่สำคัญนักในบริบทของตัวอย่างปัจจุบันตราบใดที่ค่าเหล่านั้น เหมือนกันสำหรับส่วนโค้งทั้งสอง
• 50 : จุดสิ้นสุด X พิกัด (สัมพัทธ์) ของส่วนโค้ง;
• 0 : พิกัด Y สิ้นสุด (สัมพัทธ์) ของส่วนโค้ง

ส่วนโค้งที่สองคือ 25,25 0 1,0 -50,0 . โปรดทราบว่าส่วนโค้งนี้จะเริ่มวาดจากที่ใดก็ตามที่ส่วนโค้งสุดท้ายหยุดวาด แน่นอนว่ารัศมี X และ Y เท่ากัน ( 25 ) แต่พิกัด X สิ้นสุดคือ -50 ของตำแหน่งปัจจุบัน

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

เพื่อแสดงให้คุณเห็นว่าเราสามารถวาดวงกลมได้หลายวิธี ฉันได้เตรียมปากกาเล็กๆ พร้อมตัวอย่างต่างๆ:

หากคุณมองให้ละเอียดยิ่งขึ้น คุณจะเห็นวงกลมเดิมของเราพร้อมด้วยตัวอย่างต่างๆ ห้าตัวอย่างในการวาดเส้นทางบนวงกลมนั้น แต่ละเส้นทางมี desc ย่อยที่อธิบายการใช้ค่า CX , CY และ R เพื่อสร้างวงกลม ตัวอย่างแรกคือตัวอย่างที่เราพูดถึงในที่นี้ ในขณะที่อีกสามคนใช้รูปแบบต่างๆ ที่น่าจะเข้าใจได้จากการอ่านโค้ด ตัวอย่างสุดท้ายใช้ส่วนโค้งครึ่งวงกลมสี่ส่วนแทนที่จะเป็นสองส่วน ซึ่งจำลองกระบวนการบางส่วนที่อธิบายไว้ในข้อมูลจำเพาะ SVG 2 ที่ลิงก์ด้านบน

วงกลมถูกวางทับซ้อนกันโดยใช้ดัชนี z ตามธรรมชาติของ SVG ในการวางองค์ประกอบที่มาในภายหลังในมาร์กอัปที่ด้านบนขององค์ประกอบที่มาก่อนหน้านี้

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

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

ก้าวจากเส้นทางสู่วงกลม

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

การอ่านที่แนะนำ : “ เคล็ดลับในการสร้างและส่งออก SVG ที่ดีกว่าสำหรับเว็บ” โดย Sara Soueidan

ลองใช้ SVG ต่อไปนี้จาก Wikipedia เป็นตัวอย่าง เมื่อคุณดูโค้ดสำหรับไฟล์นั้น คุณจะเห็นว่ามีเครื่องมือแก้ไขจำนวนมากเมื่อคุณเรียกใช้มันผ่าน SVGOMG ของ Jake Archibald! (ซึ่งคุณสามารถอ่านเพิ่มเติมได้ที่นี่) คุณจะจบลงด้วยบางอย่างเช่นไฟล์ต่อไปนี้ซึ่งได้รับการปรับให้เหมาะสมที่สุด แต่แวดวงในเอกสารยังคงแสดงเป็นเส้นทาง:

ลองดูว่าเราสามารถหาได้ว่าวงกลมเหล่านั้นควรเป็นอย่างไรถ้าพวกมันเป็นองค์ประกอบของวงกลมจริง ๆ จากสิ่งที่เรารู้เกี่ยวกับเส้นทางทำงานอย่างไร เห็นได้ชัดว่าเส้นทางแรกในเอกสารไม่ใช่วงกลมในขณะที่อีกสองเส้นทางถัดไป (แสดงเฉพาะแอตทริบิวต์ d ):

 M39 20a19 19 0 1 1-38 0 19 19 0 1 1 38 0z

 M25 20a5 5 0 1 1-10 0 5 5 0 1 1 10 0z

จำไว้ว่าวินาทีที่ a สามารถละเว้นได้ ลองเขียนใหม่เพื่อให้เข้าใจมากขึ้น (ทางแรกคือวงเวียนใหญ่)

 M39 20 a19 19 0 1 1-38 0 a19 19 0 1 1 38 0z

ส่วนโค้งเหล่านั้นเห็นได้ชัดว่ามีดังต่อไปนี้:

 aR R 0 1 1 - (R * 2) 0 aR R 0 1 1 (R * 2) 0

ซึ่งหมายความว่ารัศมีวงกลมของเราคือ 19 แต่ค่า CX และ CY ของเราคืออะไร ฉันคิดว่า M39 ของเราคือ CX + R ซึ่งหมายความว่า CX คือ 20 และ CY คือ 20 ด้วย

สมมติว่าคุณเพิ่มในวงกลมหลังเส้นทางทั้งหมดดังนี้:

 <circle fill="none" stroke-width="1.99975" stroke="red" r="19" cx="20" cy="20" />

คุณจะเห็นว่าถูกต้อง และวงกลมที่ขีดสีแดงครอบคลุมวงกลมขนาดใหญ่ทุกประการ เส้นทางวงกลมที่สองที่จัดรูปแบบใหม่มีลักษณะดังนี้:

 M25 20 a5 5 0 1 1-10 0 5 5 0 1 1 10 0z

เห็นได้ชัดว่ารัศมีคือ 5 และฉันพนันได้เลยว่าค่า CX และ CY ของเราเหมือนเดิม: - 20

หมายเหตุ : ถ้า CX = 20 แล้ว CX + R = 25 25 วงกลมนั่งอยู่ภายในวงกลมที่ใหญ่กว่าตรงกลาง ดังนั้นจึงควรมีค่า CX และ CY เหมือนกัน

เพิ่มวงกลมต่อไปนี้ที่ส่วนท้ายของเส้นทาง:

 <circle fill="yellow" r="5" cx="20" cy="20" />

ตอนนี้คุณสามารถเห็นได้ว่าสิ่งนี้ถูกต้องโดยดูที่ปากกาต่อไปนี้:

ตอนนี้เรารู้แล้วว่าวงกลมควรเป็นอย่างไร เราสามารถลบเส้นทางที่ไม่จำเป็นออกและสร้างวงกลมได้จริงดังที่คุณเห็นที่นี่:

ใช้เส้นทางวงกลมของเราเพื่อตัดข้อความ

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

ดู Pen วงกลมทั้งหมดห่อข้อความโดย Bryan Rasmussen

เมื่อดูเส้นทางที่แตกต่างกัน คุณจะเห็นความแตกต่างเล็กๆ น้อยๆ ระหว่างแต่ละเส้นทาง (เพิ่มเติมในอีกเล็กน้อย) แต่ก่อนอื่น จะมองเห็นความไม่เข้ากันของเบราว์เซอร์ข้ามได้เล็กน้อย โดยเฉพาะอย่างยิ่งจะสังเกตเห็นได้ชัดเจนในเส้นทางแรก:

	ผู้พัฒนา Firefox
	โครเมียม
	Microsoft Edge

เหตุผลที่เริ่มต้น "S" ของ "Smashing" อยู่ที่มุมที่ตลกในโซลูชัน Firefox คือเป็นที่ที่เราเริ่มวาดเส้นทางของเราที่ (เนื่องจากคำสั่ง vR ที่เราใช้) สิ่งนี้ชัดเจนยิ่งขึ้นในเวอร์ชัน Chrome ซึ่งคุณสามารถเห็นลิ่มรูปวงกลมแรกของวงกลมที่เราวาดได้อย่างชัดเจน:

Chrome ไม่เป็นไปตามเวดจ์ทั้งหมด ดังนั้นนี่คือผลลัพธ์เมื่อคุณเปลี่ยนข้อความเป็น “Smashing Magazine”

เหตุผลก็คือ Chrome มีข้อบกพร่องเกี่ยวกับการสืบทอดแอตทริบิวต์ textLength ที่ประกาศไว้ในองค์ประกอบ text หลัก หากคุณต้องการให้ทั้งคู่มีลักษณะเหมือนกัน ให้ใส่แอตทริบิวต์ textLength ในองค์ประกอบ textPath และข้อความ ทำไม? เนื่องจากปรากฎว่านักพัฒนา Firefox มีจุดบกพร่องเดียวกันหากไม่ได้ระบุแอตทริบิวต์ textLength ในองค์ประกอบ text (เป็นเช่นนี้มาหลายปีแล้ว)

Microsoft Edge มีจุดบกพร่องที่แตกต่างกันโดยสิ้นเชิง ไม่สามารถจัดการช่องว่างระหว่าง Text และองค์ประกอบ TextPath ลูก เมื่อคุณลบช่องว่างออก และใส่แอตทริบิวต์ textLength ไว้กับทั้งองค์ประกอบ text และข้อความ textPath เหล่านี้จะดูค่อนข้างเหมือนกัน (โดยมีความแตกต่างเล็กน้อยเนื่องจากความแตกต่างในแบบอักษรเริ่มต้น และอื่นๆ) ดังนั้น บั๊กสามตัวที่แตกต่างกันบนเบราว์เซอร์สามตัวที่แตกต่างกัน — นี่คือเหตุผลที่ผู้คนมักชอบทำงานกับไลบรารี่!

ปากกาต่อไปนี้แสดงให้เห็นว่าปัญหาสามารถแก้ไขได้อย่างไร:

ฉันยังเอาสีเติมต่างๆ ออกด้วยเพราะทำให้มองเห็นการตัดข้อความได้ง่ายขึ้น การลบสีเติมหมายความว่าฟังก์ชันเล็กๆ ของฉันที่อนุญาตให้คุณวนไปตามเส้นทางต่างๆ และดูว่าสีจะมีลักษณะอย่างไร เว้นแต่ฉันจะเพิ่มแอตทริบิวต์ pointer-events="all" ดังนั้นฉันจึงได้เพิ่มสีเหล่านั้นเข้าไปด้วย

หมายเหตุ : คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเหตุผลดังกล่าวได้ใน “การจัดการการโต้ตอบ SVG กับทรัพย์สินเหตุการณ์ตัวชี้” ที่อธิบายโดยทิฟฟานี่ บี. บราวน์

เราได้พูดถึงการห่อเส้นทาง multiarc แล้ว ตอนนี้เรามาดูส่วนอื่นๆ กัน เนื่องจากเรามีเส้นทางเดียวที่เรากำลังตัดอยู่ ข้อความจะเคลื่อนที่ไปในทิศทางเดียวกันเสมอ

ภาพ	เส้นทาง	คำอธิบาย
	M CX, CY a R, R 0 1,0 -(R * 2), 0 a R, R 0 1,0 R * 2, 0 และใช้ฟังก์ชัน translate เพื่อเลื่อน +R บนแกน X	ตำแหน่งเริ่มต้นสำหรับ textPath ของเรา (เนื่องจากเราไม่ได้ระบุไว้ แต่อย่างใด) ถูกกำหนดโดยส่วนโค้งสิ้นสุดแรกของเรา -(R * 2) โดยให้รัศมีที่ส่วนโค้งนั้นมี
	M (CX + R), CY a R,R 0 1,0 -(R * 2),0 a R,R 0 1,0 (R * 2),0	เช่นเดียวกับเส้นทางก่อนหน้า
	M CX CY m -R, 0 a R,R 0 1,0 (R * 2),0 a R,R 0 1,0 -(R * 2),0	เนื่องจากเราสิ้นสุดที่ (R * 2 ) ในส่วนโค้งแรก เราจะเริ่มที่ตำแหน่งตรงกันข้ามอย่างชัดเจน กล่าวอีกนัยหนึ่งสิ่งนี้เริ่มต้นเมื่อสองเส้นทางก่อนหน้าของเราสิ้นสุดลง
	M (CX - R), CY a R,R 0 1, 1 (R * 2),0 a R,R 0 1, 1 -(R * 2),0	สิ่งนี้เริ่มต้นในตำแหน่งเดียวกับอันสุดท้ายเนื่องจาก (R * 2) แต่ทำงานตามเข็มนาฬิกาเนื่องจากเราได้ตั้งค่าคุณสมบัติ Sweep-flag (ทำเครื่องหมายด้วยสีเหลือง) เป็น 1

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

แบ่งเส้นทางของเราออกเป็นส่วนๆ

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

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

สมมติว่าวงกลมของเราคือ CX 295, CY 200, R 175 ตอนนี้ตามวิธี Circular path ตอนนี้เราเห็นสิ่งต่อไปนี้:

 M (CX - R), CY a R,R 0 1,1 (R * 2),0 a R,R 0 1,1 -(R * 2),0 

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

• ข้อความทั้งหมดทำงานในทิศทางเดียว
• มันอาจจะดีถ้ามีข้อความบางส่วนอยู่หลังอเมทิสต์ โดยเฉพาะอย่างยิ่งในที่ที่มันเขียนว่า MAGAZINE เพื่อให้ตัว 'M' และ 'E' อยู่ในแนวเดียวกันบนวงกลม ตัว 'A' จะต้องอยู่ที่จุดด้านล่างของอเมทิสต์ ซึ่งให้ความรู้สึกไม่สมดุลในอีกทางหนึ่ง (ฉันรู้สึกว่า 'A' ควรอยู่ในตำแหน่งที่ถูกต้องและชี้ลงที่จุดนั้น)

หากเราต้องการแก้ไขปัญหาเหล่านี้ เราต้องแยกเส้นทางเดียวของเราออกเป็นสองทาง ในปากกาต่อไปนี้ ฉันได้แยกเส้นทางออกเป็นสองเส้นทาง (และวางไว้ในพื้นที่ defs ของ SVG เพื่อให้ textPath ของเราอ้างอิง):

อีกครั้ง สมมติว่า CX ของเราคือ 295, CY 200, R 175 ดังนั้นทั้งสองเส้นทางจะอยู่ในรูปแบบของเส้นทางต่อไปนี้ (สำหรับเส้นทางครึ่งวงกลมบน):

 M (CX - R), CY a R,R 0 1,1 (R * 2),0

และสิ่งต่อไปนี้สำหรับด้านล่าง:

 M (CX + R), CY a R,R 0 1,1 -(R * 2),0

อย่างไรก็ตาม เรายังคงมีข้อความวงกลมที่เคลื่อนที่ไปในทิศทางเดียวกันทั้งหมด ในการแก้ไขปัญหานั้นสำหรับทุกอย่างยกเว้น Edge สิ่งที่คุณต้องทำคือเพิ่มแอตทริบิวต์ side="right" ให้กับองค์ประกอบ text ที่มี 'MAGAZINE' textPath

ทำให้ข้อความไปในทิศทางอื่น

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

ก่อน:

 M 120, 200 a 175,175 0 1, M 120, 200 a 175,175 0 1, 1 350,0 350,0

หลังจาก:

 M 120, 200 a 175,175 0 1, M 120, 200 a 175,175 0 1, 0 350,0 350,0

แต่ตอนนี้ข้อความของเราถูกวาดบนวงในที่กำหนดโดยการกวาด และมันจะดูไม่ดีนักในเบราว์เซอร์ต่างๆ ซึ่งหมายความว่าเราจะต้องย้ายตำแหน่งของเส้นทางของเราเพื่อให้สอดคล้องกับ 'S' ของ 'Smashing' ทำให้ X สิ้นสุดของเส้นทางใหญ่ขึ้น และตั้งค่าออฟเซ็ตบางส่วนให้กับข้อความ อย่างที่คุณเห็น ยังมีข้อความความแตกต่างเล็กน้อยระหว่าง Firefox และโปรแกรมอื่นๆ ซึ่งเราสามารถปรับปรุงได้โดยการเพิ่มแอตทริบิวต์ textLength บนองค์ประกอบ text รวมทั้งลบช่องว่างออกจาก textPath (เนื่องจาก Firefox คิดว่าช่องว่างมีความหมาย)

การแก้ไขปัญหา:

เปลี่ยนดัชนี Z ของส่วนหนึ่งของข้อความวงกลมของเรา

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

คุณสามารถดูผลลัพธ์ด้านล่างได้ว่าส่วนใดของคำว่า 'MAGAZINE' ซ่อนอยู่ที่จุดล่างของอเมทิสต์

หากคุณดูที่มาร์กอัป คุณจะเห็นว่าครึ่งวงกลมล่างของข้อความถูกย้ายไปอยู่ก่อนเส้นทางที่ดึงอเมทิสต์

ทำให้ส่วนต่างๆ ของวงกลมของเราเคลื่อนไหว

ดังนั้น ตอนนี้ เราจึงมีความสามารถในการสร้างข้อความวงกลมโดยควบคุมทิศทางของส่วนต่างๆ ของข้อความได้อย่างสมบูรณ์โดยใส่ข้อความลงในครึ่งวงกลมสองวง แน่นอนว่าสิ่งนี้สามารถใช้เพื่อสร้างแอนิเมชั่นของข้อความได้เช่นกัน การสร้างแอนิเมชั่น SVG แบบข้ามเบราว์เซอร์เป็นหัวข้อของบทความอื่น (หรือบทความ อื่นอีกมากมาย ) ตัวอย่างเหล่านี้จะใช้ได้เฉพาะใน Chrome และ Firefox เนื่องจากการใช้ไวยากรณ์ภาพเคลื่อนไหว SMIL แทนคีย์เฟรม CSS หรือเครื่องมืออย่าง Greensock แต่มันให้ตัวบ่งชี้ที่ดีของเอฟเฟกต์ที่คุณสามารถทำได้โดยการสร้างภาพเคลื่อนไหวให้กับวงกลมที่สลายตัว

ใช้ปากกาต่อไปนี้:

โปรดกดปุ่ม 'เรียกใช้ซ้ำ' บนโค้ดเพนเพื่อดูแอนิเมชั่นที่ทำงานอยู่ ข้อความวงกลมสองส่วนของเราเริ่มเคลื่อนไหวพร้อมกัน แต่มีระยะเวลาต่างกันจึงสิ้นสุดในเวลาที่ต่างกัน เนื่องจากเรากำลังทำให้แอตทริบิวต์ textLength เคลื่อนไหว เราจึงใส่คำสั่ง animate สองคำสั่งไว้ใต้แต่ละข้อความ — หนึ่งคำสั่งสำหรับองค์ประกอบ text (ดังนั้น Firefox จะทำงาน) และอีกรายการสำหรับองค์ประกอบ textpath (ดังนั้น Chrome จะทำงาน)

บทสรุป

ในบทความนี้ เราได้เห็นวิธีเปลี่ยนวงกลมให้เป็นเส้นทางแล้วย้อนกลับมาอีกครั้ง เพื่อให้เข้าใจมากขึ้นว่าเมื่อใดที่เราจำเป็นต้องปรับเส้นทางให้เหมาะสมและเมื่อไม่ต้องการ เราได้เห็นแล้วว่าการเปลี่ยนวงกลมเป็นเส้นทางทำให้เราวางข้อความบนเส้นทางวงกลมได้อย่างไร แต่ยังรวมถึงวิธีแยกเส้นทางวงกลมออกเป็นครึ่งวงกลมและควบคุมทิศทางและภาพเคลื่อนไหวของส่วนประกอบต่างๆ ของข้อความวงกลมได้อย่างเต็มที่ .

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• ทบทวน SVG ที่ตอบสนอง
• สร้างภาพเคลื่อนไหวไฟล์ SVG ด้วย SVGator
• จัดแต่งทรงผมและเคลื่อนไหว SVG ด้วย CSS
• การจัดการการโต้ตอบ SVG ด้วยคุณสมบัติเหตุการณ์ตัวชี้