คู่มือการออกแบบเว็บไซต์เพื่อใช้ 'SVG' Viewbox (HTML)
Viewbox เป็นแอตทริบิวต์ที่ใช้กันโดยทั่วไปเมื่อสร้างรูปร่าง SVG ถ้าคุณคิดว่าเอกสารเป็นผ้าใบกล่องมุมมองเป็นส่วนหนึ่งของผืนผ้าใบที่คุณต้องการให้ผู้ชมเห็น แม้ว่าหน้าอาจครอบคลุมทั้งหน้าจอคอมพิวเตอร์ภาพอาจอยู่ในหนึ่งในสามของทั้ง
Viewbox ช่วยให้คุณสามารถบอก parser เพื่อซูมเข้าไปในส่วนที่สามได้ ช่วยลดพื้นที่สีขาว คิดว่าช่องมองภาพเป็นเสมือนวิธีการตัดภาพ
หากไม่มีภาพกราฟิกของคุณจะปรากฏเป็นหนึ่งในสามของขนาดจริง
ค่าช่องทาง
เมื่อต้องการครอบตัดรูปภาพคุณต้องสร้างจุดบนรูปภาพเพื่อตัดภาพ เช่นเดียวกันเมื่อใช้แอตทริบิวต์ของกล่องดู การตั้งค่าสำหรับกล่องกาเครื่องหมายรวมถึง:
- minx - พิกัด x เริ่มต้น
- miny - จุดเริ่มต้นของ y
- width-width ของ viewbox
- ความสูง - ความสูงของกล่องกาเครื่องหมาย
ไวยากรณ์สำหรับค่ามุมมองของกล่องคือ:
viewBox = "0 0 200 150"
อย่าสับสนระหว่างความกว้างและความสูงของกล่องมุมมองกับความกว้างและความสูงที่คุณกำหนดไว้สำหรับเอกสาร SVG เมื่อคุณสร้างไฟล์ SVG หนึ่งค่าแรกที่คุณสร้างขึ้นคือความกว้างและความสูงของเอกสาร เอกสารเป็นผืนผ้าใบ ช่องมุมมองสามารถครอบคลุมทั้งผืนผ้าใบหรือเพียงบางส่วนเท่านั้น
ช่องมุมมองนี้ครอบคลุมทั้งหน้า
ช่องมุมมองนี้ครอบคลุมครึ่งหน้าเริ่มต้นที่มุมบนขวา
รูปร่างของคุณยังมีการกำหนดความสูงและความกว้าง
เป็นเอกสารที่ครอบคลุม 800 x 400 px โดยใช้มุมมองที่มุมบนขวาและขยายครึ่งหน้า รูปร่างเป็นรูปสี่เหลี่ยมผืนผ้าที่เริ่มต้นที่มุมขวาบนของกล่องมุมมองและเลื่อน 100 px ไปทางซ้ายและ 50 px ลง
ทำไมต้องตั้งค่าช่องรับชม
SVG ทำอะไรได้มากกว่าแค่วาดรูปทรง มันสามารถสร้างรูปหนึ่งที่ด้านบนของอีกเพื่อให้ได้ผลเงา สามารถเปลี่ยนรูปร่างเพื่อให้เอียงไปในทิศทางเดียว สำหรับตัวกรองขั้นสูงคุณจะต้องทำความเข้าใจและใช้แอตทริบิวต์ของกล่องข้อมูล