- ฟังก์ชัน CSS
shape() เริ่มรองรับแล้วในเบราว์เซอร์ Chromium และ WebKit
- ต่างจาก
path() แบบเดิม ตอนนี้สามารถ กำหนดรูปทรงที่ซับซ้อน ได้ด้วย ไวยากรณ์และหน่วยแบบ CSS ที่อ่านง่ายกว่า
- เมื่อต้องสร้างรูปทรงซับซ้อนใน
clip-path ก็สามารถทำได้ด้วย คำสั่งภาษาอังกฤษ แทนการใช้พิกัดแบบ SVG
- มี คำสั่งใหม่ อย่าง
line, arc, curve เป็นต้น ที่ช่วยให้เขียนเส้น เส้นโค้ง และอาร์กได้กระชับขึ้น
- ตอนนี้
shape() ยัง รองรับแอนิเมชันได้จำกัด แต่ สามารถเปลี่ยนแบบไดนามิกตาม hover/focus ได้
ภาพรวม
- ฟังก์ชัน CSS
shape() ใช้ร่วมกับ clip-path เพื่อให้สามารถ คลิปรูปทรงที่ซับซ้อน ได้ในเบราว์เซอร์
- ก่อนหน้านี้สามารถใช้รูปทรงพื้นฐานอย่าง
circle, ellipse, polygon ได้ แต่ถ้าจะทำ รูปทรงอิสระต้องใช้ path() เท่านั้น
path() ต้อง ใส่พิกัดและคำสั่งของ SVG ตรง ๆ จึงอ่านยากและมีช่วงการเรียนรู้ค่อนข้างสูง
คุณลักษณะของฟังก์ชัน shape()
- สามารถ ประกอบรูปทรงเวกเตอร์ในสไตล์แบบ CSS ได้
- ระบุจุดเริ่มต้นได้ด้วย คีย์เวิร์ดทิศทาง (
from top left) หรือ ค่าพิกัด (from 0 0)
- รูปทรงจะ ประกอบด้วยชุดคำสั่งต่อเนื่องกัน เช่น
line, vline, arc, curve, smooth
คำอธิบายคำสั่งหลัก
- line
- ความหมาย: วาดเส้นจากจุดเริ่มต้น
- วิธีใช้: ใช้คีย์เวิร์ด
by เพื่อระบุตำแหน่งแบบสัมพัทธ์
- ตัวอย่าง:
line by -2px 3px
- vline
- ความหมาย: วาดเส้นแนวตั้ง
- วิธีใช้: ใช้
to สำหรับตำแหน่งแบบสัมบูรณ์ และ by สำหรับตำแหน่งแบบสัมพัทธ์
- ตัวอย่าง:
vline to 50px
- hline
- ความหมาย: วาดเส้นแนวนอน
- วิธีใช้: ใช้
to สำหรับตำแหน่งแบบสัมบูรณ์ และ by สำหรับตำแหน่งแบบสัมพัทธ์
- ตัวอย่าง:
hline to 95%
- arc
- ความหมาย: วาดเส้นโค้งแบบวงรี
- วิธีใช้:
to: จุดปลายของอาร์กwith: ทิศทางการเอียงของอาร์ก (แนวนอน/แนวตั้ง)of: รัศมีของวงรีที่อาร์กนั้นเป็นส่วนหนึ่งของมัน (แนวนอน/แนวตั้ง)
- ตัวอย่าง:
arc to 10% 50% of 1%
- curve
- ความหมาย: วาดเส้นโค้งเบซิเยร์
- วิธีใช้:
to: จุดปลายของเส้นโค้งwith: จุดควบคุมของเส้นโค้ง (ใช้ปรับความโค้ง)
- ตัวอย่าง:
curve to 0% 100% with 50% 0%
- smooth
- ความหมาย: วาดเส้นโค้งแบบลื่นไหล (เส้นโค้งเบซิเยร์ที่เชื่อมต่อกัน)
- วิธีใช้:
to: จุดปลายby: พิกัดแบบสัมพัทธ์with: จุดควบคุม
อื่น ๆ
shape() เปลี่ยนแบบไดนามิกได้ในสถานะ hover/focus- ในเบราว์เซอร์ปัจจุบัน แอนิเมชัน
transition ยังไม่ทำงาน
- สามารถใช้ฟังก์ชันคำนวณ
calc() ได้ด้วย
ลิงก์อ้างอิง
ยังไม่มีความคิดเห็น