การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL
เพิ่มการเคลื่อนไหวให้องค์ประกอบ SVG ด้วยทรานซิชัน CSS และ SMIL
การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเปลี่ยนผ่าน CSS บน SVG
แอตทริบิวต์การแสดงผลของ SVG ได้แก่ fill, stroke, opacity และ transform สามารถทำให้เคลื่อนไหวได้ด้วยการเปลี่ยนผ่าน CSS เพิ่มคลาสและกำหนดการเปลี่ยนผ่านดังนี้: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; } การเปลี่ยนผ่าน CSS ทำงานกับองค์ประกอบ SVG ในลักษณะเดียวกับองค์ประกอบ HTML
ภาพเคลื่อนไหวแบบคีย์เฟรม CSS บน SVG
ใช้ @keyframes กับองค์ประกอบ SVG: ทำให้ stroke-dashoffset เคลื่อนไหวเพื่อสร้างเอฟเฟกต์การวาดเส้นทาง ใช้ opacity สำหรับการค่อย ๆ ปรากฏ และใช้ transform สำหรับการเคลื่อนที่และการหมุน ไวยากรณ์ภาพเคลื่อนไหวเดียวกับที่ใช้กับองค์ประกอบ HTML สามารถใช้กับองค์ประกอบ SVG ได้โดยไม่ต้องแก้ไข
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }เอฟเฟกต์การวาดเส้นทาง
เทคนิค stroke-dasharray และ stroke-dashoffset จำลองการวาดเส้นทางได้ โดยกำหนด dasharray ให้เท่ากับความยาวเส้นทาง กำหนด dashoffset ให้เท่ากับความยาวเส้นทางเพื่อซ่อนเส้น แล้วทำให้ dashoffset เคลื่อนไหวจนเป็น 0 เส้นจะดูเหมือนถูกวาดขึ้นเองจากต้นทางไปยังปลายทาง
การหาความยาวเส้นทาง
path.getTotalLength() คืนค่าความยาวของเส้นทางในหน่วยผู้ใช้ของ SVG ใช้ค่านี้กับทั้ง stroke-dasharray และค่าเริ่มต้นของ stroke-dashoffset วิธีนี้ทำให้ภาพเคลื่อนไหวทำงานได้อย่างถูกต้องไม่ว่าเส้นทางจะซับซ้อนหรือยาวเพียงใด
transform ของ CSS บน SVG
เบราว์เซอร์สมัยใหม่รองรับ transform ของ CSS กับองค์ประกอบ SVG โดยค่าเริ่มต้น transform-origin จะอยู่ที่มุมซ้ายบนของ SVG ไม่ใช่จุดกึ่งกลางขององค์ประกอบเหมือนใน HTML ระบุ transform-box: fill-box เพื่อให้ transform-origin อ้างอิงจากกรอบขอบเขตขององค์ประกอบ
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}ภาพเคลื่อนไหว SMIL
SMIL (ภาษาผสานมัลติมีเดียแบบซิงโครไนซ์) คือระบบภาพเคลื่อนไหวในตัวของ SVG องค์ประกอบ animate จะเปลี่ยนค่าของแอตทริบิวต์ตามเวลา SMIL ไม่จำเป็นต้องใช้ JavaScript หรือ CSS เพราะภาพเคลื่อนไหวจะประกาศไว้ภายในมาร์กอัป SVG ทั้งหมด
<circle r="20">
<animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>animateTransform
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> จะหมุนองค์ประกอบรอบจุดศูนย์กลางที่ระบุโดยใช้ไวยากรณ์ของ SMIL
animateMotion
<animateMotion> ทำให้องค์ประกอบเคลื่อนที่ไปตามเส้นทาง SVG อ้างอิงเส้นทางด้วย mpath หรือใส่ข้อมูลเส้นทางไว้โดยตรง องค์ประกอบจะเคลื่อนตามเส้นโค้งของเส้นทางโดยอัตโนมัติ จึงเหมาะสำหรับเส้นทางการเคลื่อนที่ซับซ้อนที่ไม่ต้องคำนวณพิกัดด้วยตนเอง
ข้อแลกเปลี่ยนระหว่าง CSS กับ SMIL
ภาพเคลื่อนไหว CSS: รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ทำงานร่วมกับลำดับการซ้อนทับของ CSS และควบคุมด้วย JavaScript ได้ง่ายกว่า เช่น หยุดชั่วคราวหรือย้อนกลับ ส่วน SMIL: อยู่ภายในมาร์กอัป SVG ได้ในตัว ทำงานกับไฟล์ SVG แบบคงที่ที่เข้าถึง CSS ไม่ได้ และมีรูปแบบประกาศที่สื่อความหมายได้ดีสำหรับภาพเคลื่อนไหวตามเส้นทาง
การแปรรูปเส้นทาง SVG
ทำให้รูปร่างของเส้นทางสองแบบเปลี่ยนผ่านระหว่างกันได้ แต่เส้นทางทั้งสองต้องมีจำนวนคำสั่งเท่ากันและมีโครงสร้างที่เข้ากันได้ ภาพเคลื่อนไหว CSS จะทำให้คุณสมบัติ d เปลี่ยนแปลงได้ (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } เพื่อแปรรูปเส้นทางด้วย CSS โดยตรง
การเข้าถึงได้สำหรับภาพเคลื่อนไหว SVG
เพิ่มมีเดียคิวรี prefers-reduced-motion เพื่อปิดหรือทำให้ภาพเคลื่อนไหว SVG เรียบง่ายลงสำหรับผู้ใช้ที่รู้สึกไม่สบายกับการเคลื่อนไหว ควรปิดภาพเคลื่อนไหวเพื่อการตกแต่งทั้งหมด ส่วนภาพเคลื่อนไหวที่มีความหมาย เช่น สถานะกำลังโหลด ควรทำให้เรียบง่ายลงแทนการหยุดโดยสิ้นเชิง
ตรวจสอบความรู้
เทคนิค stroke-dasharray และ stroke-dashoffset สร้างภาพเคลื่อนไหวการวาดเส้นทางได้อย่างไร
สรุป
ภาพเคลื่อนไหว SVG ใช้การเปลี่ยนผ่าน CSS และคีย์เฟรมสำหรับเอฟเฟกต์ที่อิงคุณสมบัติ ใช้เทคนิค stroke-dasharray/dashoffset สำหรับการวาดเส้นทาง ใช้ SMIL animate/animateTransform/animateMotion สำหรับภาพเคลื่อนไหวแบบประกาศภายใน SVG และใช้ prefers-reduced-motion เพื่อการเข้าถึง CSS และ SMIL ทำงานเสริมกัน ควรเลือกใช้ตามว่า SVG ต้องทำงานร่วมกับลำดับการซ้อนทับของ CSS หรือจำเป็นต้องพกพาเป็นไฟล์เดี่ยว
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL”
เพิ่มการเคลื่อนไหวให้องค์ประกอบ SVG ด้วยทรานซิชัน CSS และ SMIL คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- SVG แบบอินไลน์เทียบกับ img และ object
- รูปร่าง SVG พื้นฐาน: rect circle path
- SVG viewBox และการปรับขนาดแบบตอบสนอง
- การทำภาพเคลื่อนไหว SVG ด้วย CSS และ SMIL