ค่า SVG และ viewBox


14

ฉันแค่อยากรู้อยากเห็นถ้าใครรู้ว่าviewBoxค่า (เช่นviewBox="a b c d") จะถูกกำหนด

ฉันพยายามเข้าใจฟังก์ชั่น SVG ของ Inkscape ดังนั้นสิ่งที่ฉันทำคือสร้างเอกสารใน Inkscape นั่นคือ100pxx 100pxวาดเส้นจากด้านซ้ายของวิวพอร์ต (เช่น0ค่าแนวนอน) ไปทางขวา (เช่น100ค่าแนวนอน) .

แปลก แต่เมื่อฉันบันทึกเอกสารนี้เป็นไฟล์ธรรมดา SVG และจากนั้นเปิดไฟล์ในโปรแกรมแก้ไขข้อความที่viewBoxค่ามีการกำหนดให้แทนการพูดviewBox="0 0 26.458333 26.458334"viewBox="0 0 100 100"

มีใครรู้บ้างว่าค่าเหล่านี้ ( 0 0 26.458333 26.458334) ถูกกำหนดไว้อย่างไรและทำไมไม่มีความสัมพันธ์ระหว่างค่าเหล่านี้กับขนาดวิวพอร์ต?

PS ฉันรู้ว่าคุณสามารถแก้ไขviewBoxคุณสมบัติด้วยตนเองได้ในตัวเลือกเอกสาร แต่ฉันยังสงสัยว่าทำไม Inkscape จึงตั้งค่าเหล่านั้นให้เป็นค่าที่ขี้ขลาด

คำตอบ:


19

Inkscape ใช้ mm เป็นหน่วยแสดงผลเริ่มต้นหรือหน่วยผู้ใช้สำหรับเอกสารของคุณ หน่วยผู้ใช้ถูกใช้เพื่อเก็บค่าในไฟล์ SVG

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

100px x 100pxแท็กนี้อธิบายขนาดภาพวาดของ Viewbox แอตทริบิวต์กำหนดว่าจะเทียบเท่ากับ100px x 100px26.458333 x 26.458333 user units

ตัวคูณสเกล SVG 1px / 0.2645 user-unitนั้นสามารถใช้งานได้โดยตัวเรนเดอร์ SVG เพื่อแปลงค่าทั้งหมดที่เก็บไว้ในหน่วยผู้ใช้เป็นมิติการวาดในโลกแห่งความเป็นจริง


ในกรณีนี้ Inkscape ต้องการเก็บค่าไว้mmดังนั้นจึงต้องรู้ว่าpxเกี่ยวข้องmmอย่างไร ข้อกำหนด CSSอธิบายว่าหน่วยความยาวที่แน่นอนได้รับการแก้ไขในความสัมพันธ์กับแต่ละอื่น ๆ :96px = 1in

ซึ่งหมายความว่า 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

นั่นคือสิ่งที่26.45833333มาจาก


หากคุณต้องการ Inkscape เก็บค่าของคุณทั้งหมดในpxคุณสามารถเปลี่ยนค่าเริ่มต้นหน่วยแสดงผลหรือใช้หน่วยการpxในคุณสมบัติของเอกสาร (ไฟล์> คุณสมบัติเอกสาร> แท็บ: หน้า> ทั่วไป> หน่วยแสดงผล)

  1. ค่าเริ่มต้น mm:

คุณสมบัติเอกสารมม

  1. เปลี่ยน: px:

เอกสารคุณสมบัติ px

การส่งออกเอกสารเดียวกันจะส่งผลให้แท็ก SVG ต่อไปนี้:

<svg width="100" height="100" viewBox="0 0 100 100">

ตอนนี้ปัจจัย SVG 1px / 1 user-unitขนาดคือ

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้มีคำอธิบายโดยละเอียดเพิ่มเติมในInkscape Wiki

หมายเหตุ:

  • Inkscape v0.92 ใช้ความสัมพันธ์ของ96px/inInkscape v0.91 และก่อนหน้านี้ใช้ค่าเป็น90px/in

ว้าว. น่าสนใจมาก. ดังนั้นจึงมีสัมผัสและเหตุผลที่มัน ขอบคุณมากสำหรับการแบ่งปันความรู้ของคุณ!
oldboy

ฉันจะจำเทคนิค Whiteout ที่คุณใช้ ผมปกติใส่สี่เหลี่ยมสีแดงรอบส่วนสำคัญของภาพหน้าจอของคุณคือเพื่อให้มาก nicer
aaaaaa
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.