บทความนี้ส่วนใหญ่แนะนำการใช้แอตทริบิวต์ ViewBox เมื่อใช้ภาพ SVG ใน HTML5 รวมถึงเนื้อหาที่เกี่ยวข้องกับการออกแบบที่ตอบสนอง เพื่อนที่ต้องการมันสามารถอ้างถึงมัน เพื่อทำความเข้าใจพารามิเตอร์ของ viewbox ได้อย่างรวดเร็ว
แอตทริบิวต์ Viewbox ใช้เพื่อระบุต้นกำเนิดและขนาดของระบบพิกัดของอิมเมจ SVG ของผู้ใช้ เนื้อหาทั้งหมดที่วาดใน SVG นั้นทำเมื่อเทียบกับระบบพิกัดนี้ เนื่องจากผืนผ้าใบ SVG ขยายออกไปอย่างไม่สิ้นสุดในทุกทิศทางคุณสามารถวาดกราฟิกนอกขอบเขตของระบบพิกัดนี้ได้ แต่กราฟิกเหล่านี้อยู่ในตำแหน่งที่สัมพันธ์กับหน้าต่าง SVG สามารถควบคุมได้โดยตำแหน่งของระบบพิกัดของผู้ใช้
คุณสมบัติ ViewBox ใช้พารามิเตอร์สี่ตัวเพื่อระบุตำแหน่งของแหล่งกำเนิดของระบบพิกัดและขนาด: ความสูงของความกว้าง xy ในกรณีเริ่มต้นระบบพิกัดนี้เทียบเท่ากับระบบพิกัดหน้าต่างเริ่มต้น (กำหนดโดยความกว้างและความสูงของภาพ SVG) และแหล่งกำเนิดอยู่ใน (0, 0) - นั่นคือมุมบนซ้ายของ SVG
โดยการเปลี่ยนค่าของพารามิเตอร์สองตัว X และ Y สามารถปรับตำแหน่งของต้นกำเนิดได้ เปลี่ยนค่าความกว้างและความสูงเพื่อเปลี่ยนขนาดของระบบพิกัด เพียงใช้แอตทริบิวต์ Viewbox เพื่อช่วยให้คุณขยายหรือครอบตัดผืนผ้าใบ SVG อ่านด้วยตัวอย่าง
สำคัญ: ในบทความนี้ฉันจะไม่เปลี่ยนพฤติกรรมเริ่มต้น (ขนาดและตำแหน่ง) ของ viewbox ภายในหน้าต่าง SVG เนื่องจากตามพฤติกรรมเริ่มต้นของแอตทริบิวต์เนื้อหาของ viewbox จะรวมอยู่ในหน้าต่างอย่างสมบูรณ์ที่สุดเท่าที่จะเป็นไปได้แล้ววางไว้ในศูนย์ อย่างไรก็ตามการใช้คุณสมบัติ Sustaineaspectratio ช่วยให้คุณสามารถเปลี่ยนขนาดและตำแหน่งของ viewbox ได้อย่างอิสระ แต่ในบทความนี้นี่ไม่ใช่เทคนิคที่จำเป็นดังนั้นเราจะไม่อธิบายในเชิงลึกเช่นกัน
ใช้ viewbox เพื่อครอบตัด SVG นั่นคือใช้แอตทริบิวต์ ViewBox เพื่อสร้าง SVG ของทิศทางศิลปะ
เมื่อไม่นานมานี้ลูกค้าคนหนึ่งของฉันขอให้ตั้งค่า Avatar SVG ของเว็บไซต์ของเขาให้มีขนาดต่างกันตามขนาดหน้าจอที่แตกต่างกันดังนั้นเพียงส่วนเล็ก ๆ ของมันจะมองเห็นได้บนหน้าจอขนาดเล็กส่วนใหญ่สามารถมองเห็นได้ในขนาดหน้าจอขนาดกลาง ความคิดแรกที่อยู่ในใจของฉันในเวลานั้นคือความต้องการของเขาคือการใช้แอตทริบิวต์ Viewbox เพื่อครอบตัดภาพ SVG จากนั้นแสดงส่วนหนึ่งของภาพที่เขาต้องการเห็นตามขนาดหน้าจอที่แตกต่างกัน
ด้วยการเปลี่ยนขนาดและต้นกำเนิดของระบบพิกัด SVG เราสามารถครอบตัด SVG และแสดงส่วนของเนื้อหาที่เราต้องการแสดงในหน้าต่าง
มาดูวิธีการใช้งาน
สมมติว่าเรามีภาพ SVG ที่สมบูรณ์นี้ดังนี้และจากนั้นเราต้องการครอบตัดมันเป็นขนาดของหน้าจอขนาดเล็ก ภาพนี้เป็นเวกเตอร์บ้านที่ใช้งานได้ฟรีที่ออกแบบโดย FreePik ซึ่งได้รับใบอนุญาตภายใต้ข้อตกลง Creative Commons Attribution 3.0 ที่ไม่ได้รับ เพื่อความเรียบง่ายก่อนอื่นสมมติว่าภาพนั้นเป็นเรื่องเกี่ยวกับสิ่งที่จะถูกครอบตัดเพื่อแสดงบนหน้าจอขนาดเล็กและขนาดกลางและเนื้อหาที่สมบูรณ์ที่แสดงบนหน้าจอขนาดใหญ่ดังที่แสดงด้านล่าง
รูปภาพทางด้านซ้ายเป็นภาพที่สมบูรณ์ที่เราจะครอบตัดโดยใช้คุณสมบัติ Viewbox และรูปภาพทางด้านขวาคือพื้นที่ที่เราต้องการแสดงบนหน้าจอขนาดเล็ก
ตอนนี้ครอบตัด SVG โดยการเปลี่ยนค่าของคุณสมบัติ ViewBox มีบางสิ่งที่ต้องพิจารณาเราจะพูดถึงพวกเขาในภายหลัง แต่ก่อนอื่นเราต้องเปลี่ยนระบบพิกัดเพื่อให้ตรงกับเนื้อหาของพื้นที่สี่เหลี่ยมผืนผ้าเสมือนจริงในภาพด้านบน โดยการปรับที่มาของระบบและค่าของความกว้างและความสูงเราสามารถเปลี่ยนค่าพารามิเตอร์ 0 0 800 800 เริ่มต้น
แต่เราจะรู้พิกัดใหม่และมิติใหม่ได้อย่างไร? ประเด็นก็คือไม่ต้องผ่านการทดลองและข้อผิดพลาดซ้ำ ๆ จำนวนมาก
มีหลายวิธี เนื่องจากเราอยู่ในตัวแก้ไขกราฟิกแล้ว (ตัวอย่างของฉันใช้ AI) เราจึงสามารถใช้แผงควบคุมเพื่อรับตำแหน่งและขนาดขององค์ประกอบ
ฉันวาดกล่องรูปสี่เหลี่ยมผืนผ้าประนี้นอกเหนือจากการแสดงสิ่งที่ฉันต้องการแสดงบนหน้าจอขนาดเล็กเหตุผลอีกประการหนึ่งคือเราสามารถรับตำแหน่งและขนาดของสี่เหลี่ยมผืนผ้าและใช้เป็นค่าของ viebbox การใช้แผงการแปลงของ AI (ในภาพด้านล่าง) เราได้รับค่าที่เราต้องการ โดยการเลือกสี่เหลี่ยมผืนผ้าและคลิกที่ลิงก์การแปลงที่มุมขวาบนเราจะได้รับแผงที่แสดงในรูปด้านล่างรวมถึงค่า X, Y, ความกว้างและความสูงที่เราต้องการ
แผงการแปลงใน AI นี้สามารถใช้เพื่อให้ได้ตำแหน่งและขนาดของสี่เหลี่ยมที่เลือก
คุณอาจสังเกตเห็นว่าค่าข้างต้นไม่ใช่จำนวนเต็มดังนั้นเราจึงต้องแก้ไขด้วยตนเอง จากข้อมูลข้างต้นเราเปลี่ยนค่าของ Viewbox เป็น 0 200 512 512
เนื่องจากอัตราส่วนภาพของ Viewbox ใหม่นั้นเหมือนกับหน้าต่าง SVG (ทั้งสองสี่เหลี่ยม) เนื้อหาใน Viewbox จะถูกขยายและเฉพาะพื้นที่ที่เลือกจะแสดงในหน้าต่าง หลังจากเปลี่ยนค่าของ viewbox ผลลัพธ์จะแสดงในรูป:
SVG ที่เพิ่งถูกครอบตัด เฉพาะตำแหน่งที่เราระบุว่าคุณสมบัติ ViewBox สามารถมองเห็นได้ในหน้าต่าง เส้นขอบสีน้ำเงินหมายถึงหน้าต่างของ SVG
ณ จุดนี้มีปัญหาที่ต้องแก้ไข:
จะเกิดอะไรขึ้นถ้าอัตราส่วนภาพของพื้นที่ที่ถูกครอบตัด (เช่น viewbox) คืออัตราส่วนภาพของหน้าต่าง SVG หรือไม่?
ในกรณีนี้จะมีการล้นที่สำคัญ การล้นที่เห็นได้ชัดฉันไม่ได้หมายถึงส่วนขยายที่เกินขอบเขตหน้าต่าง SVG แต่เป็น overflow ที่สัมพันธ์กับระบบพิกัดผู้ใช้ใหม่ที่กำหนดโดย Viebbox รูปต่อไปนี้ให้คำอธิบายที่สอดคล้องกัน
หากอัตราส่วนมุมมองของ viewbox นั้นแตกต่างจากอัตราส่วนภาพของ viewbox เนื้อหาใน SVG จะล้นระบบพิกัดของผู้ใช้และผลลัพธ์อาจเป็นเช่นนี้
เส้นขอบสีดำแสดงถึงระบบพิกัดผู้ใช้ใหม่และเส้นขอบสีน้ำเงินคือหน้าต่าง SVG
เส้นขอบสีดำในภาพด้านบนคือพื้นที่ที่กำหนดโดย Viewbox ตามพฤติกรรมเริ่มต้นของ viewbox ในหน้าต่างมันจะอยู่กึ่งกลางและขยายให้มากที่สุดเท่าที่จะทำได้เพื่อให้แน่ใจว่าเนื้อหาของมันรวมอยู่ในหน้าต่าง (เส้นขอบสีน้ำเงิน)
เนื่องจาก SVG Canvas ขยายแนวคิดอย่างไม่สิ้นสุดในทุกทิศทุกทางคุณสามารถวาดกราฟิกนอกขอบเขตของระบบพิกัดของผู้ใช้และเนื้อหาจะล้นและย้ายโดยตรงดังแสดงในรูปด้านบน
หากคุณเปลี่ยนอัตราส่วนมุมมองของหน้าต่าง SVG (ความกว้างและความสูงของ SVG) เพื่อให้พวกเขาปรับตัวเข้ากับอัตราส่วนภาพของ Viebbox คุณจะไม่เห็นการล้นเพราะการซูมของช่อง viewbox ถูกปรับให้เข้ากับหน้าต่างเช่นเดียวกับในตัวอย่างก่อนหน้า
อย่างไรก็ตามในบางกรณีคุณอาจไม่ต้องการเปลี่ยนอัตราส่วนภาพของ SVG เลย ตัวอย่างเช่นหากคุณใช้ SVG Sprite เป็นชุดของรูปภาพเพื่อแสดงภาพบนหน้า ในกรณีส่วนใหญ่ภาพมีอัตราส่วนที่คงที่ - และคุณไม่ต้องการเปลี่ยนขนาดของภาพเพียงเพื่อปรับให้เข้ากับเนื้อหาของภาพขนาดเล็กภายใน หรือบางทีคุณอาจฝังระบบไอคอนและต้องการให้ไอคอนทั้งหมดมีขนาดเท่ากันในเวลาเดียวกัน
ในการตัดส่วนเกิน (ตัวอย่างเช่นไอคอนอื่น ๆ ในสไปรต์จะแสดงในหน้าต่าง) คุณสามารถใช้ <Clippath> เพื่อตัดส่วนเกินออก เส้นทางการตัดสามารถเป็นองค์ประกอบ <rect> ที่ครอบคลุมพื้นที่ Viewbox ทั้งหมดจากนั้นใช้องค์ประกอบนั้นกับรูท SVG
อย่างไรก็ตามมีอีกสิ่งหนึ่งที่ต้องจำไว้: ตรวจสอบให้แน่ใจว่าคุณสมบัติ X และ Y ของ <rect> สอดคล้องกับ viebbox เว้นแต่ว่า rect จะอยู่ในตำแหน่งที่ต้นกำเนิดของระบบดั้งเดิม/เริ่มต้นจากนั้นเนื้อหาของ SVG ที่ถูกครอบตัดก็ไม่แน่นอนเช่นกัน
CSS รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด