มีแนวคิดเรื่องขนาดใน SVG หรือไม่?


11

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

คำตอบ:


15

ความกว้างและความสูงมีความเกี่ยวข้องเฉพาะเมื่อviewBoxมีการตั้งค่า หากไม่มีแอตทริบิวต์นั้นคุณสามารถลบความกว้างและความสูงได้อย่างปลอดภัย มันจะแสดงตามระดับที่วาดไว้เสมอ หาก a <rect>ตั้งค่าไว้ที่ 10px กว้าง 20px สูงมันจะแสดงที่ขนาด 10x20 โดยมีหรือไม่มีความกว้างหรือสูงเมื่อไม่มีการตั้งค่า viewBox

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

หากไม่มีความกว้างและความสูง แต่ตั้งค่า viewBox สิ่งนี้จะอนุญาตให้ svg ปรับขนาดได้ไม่ จำกัด ซึ่งอาจเป็นพฤติกรรมที่ต้องการหรือไม่ต้องการก็ได้ ในหน้า HTML ที่ตอบสนองต่อสิ่งนี้มักจะต้องการ มันจะย่อหรือขยายเพื่อให้พอดีกับคอนเทนเนอร์ที่มีขอบเขต

เหล่านี้เหมือนกัน

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

นี่เป็นสองเท่าของขนาดดั้งเดิม

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

วิธีนี้ช่วยให้การปรับขนาดไม่สิ้นสุด

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.