Giá trị SVG và viewBox


13

Tôi chỉ tò mò nếu có ai biết cách xác định viewBoxgiá trị (nghĩa là viewBox="a b c d").

Tôi đang cố gắng hiểu chức năng SVG của Inkscape, vì vậy những gì tôi đã làm là tạo một tài liệu trong Inkscape là 100pxx 100px, vẽ một đường từ phía bên trái của chế độ xem (tức là 0giá trị ngang) sang bên phải (tức là 100giá trị ngang) .

Tuy nhiên, thật kỳ lạ, khi tôi lưu tài liệu này dưới dạng tệp Plain SVG, sau đó mở tệp trong trình soạn thảo văn bản, các viewBoxgiá trị được đặt thành viewBox="0 0 26.458333 26.458334"thay vì, nói , viewBox="0 0 100 100".

Có ai biết làm thế nào các giá trị này ( 0 0 26.458333 26.458334) được xác định và tại sao dường như không có mối quan hệ nào giữa chúng và kích thước khung nhìn không?

PS Tôi biết bạn có thể chỉnh sửa thuộc viewBoxtính theo cách thủ công trong các tùy chọn tài liệu, nhưng tôi vẫn tò mò về lý do tại sao Inkscape đặt chúng thành các giá trị thú vị.

Câu trả lời:


17

Inkscape sử dụng mm làm đơn vị hiển thị hoặc đơn vị người dùng mặc định cho tài liệu của bạn. Đơn vị người dùng được sử dụng để lưu trữ các giá trị trong tệp SVG.

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

Thẻ này mô tả kích thước bản vẽ của 100px x 100px. Thuộc tính viewBox xác định 100px x 100pxtương đương với 26.458333 x 26.458333 user units.

Hệ số tỷ lệ SVG sẽ là 1px / 0.2645 user-unit, có thể được sử dụng bởi trình kết xuất SVG để chuyển đổi tất cả các giá trị được lưu trữ trong các đơn vị người dùng sang kích thước bản vẽ trong thế giới thực .


Trong trường hợp này, Inkscape muốn lưu trữ các giá trị mm, vì vậy nó phải biết pxliên quan đến nó như thế nào mm. Các đặc điểm kỹ thuật CSS mô tả rằng đơn vị chiều dài tuyệt đối được cố định trong mối quan hệ với nhau:96px = 1in

Điều này có nghĩa là 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Vì vậy, đó là nơi 26.45833333xuất phát.


Nếu bạn muốn Inkscape lưu trữ tất cả các giá trị của mình px, bạn có thể thay đổi đơn vị Hiển thị hoặc đơn vị người dùng mặc định thành pxtrong thuộc tính tài liệu (Tệp> Thuộc tính tài liệu> Tab: Trang> Chung> Đơn vị hiển thị)

  1. Mặc định, mm:

Thuộc tính tài liệu mm

  1. Đã thay đổi: px:

Thuộc tính tài liệu px

Xuất cùng một tài liệu sẽ dẫn đến thẻ SVG sau:

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

Bây giờ hệ số tỷ lệ SVG là 1px / 1 user-unit.

Nếu bạn muốn biết thêm về chủ đề này, có một lời giải thích chi tiết hơn trong Inkscape Wiki

Nhận xét:

  • Inkscape v0.92 sử dụng mối quan hệ của 96px/in, Inkscape v0.91 và trước đó đã sử dụng giá trị của90px/in

Ồ Rất thú vị. Vì vậy, có một vần điệu và lý do cho nó. Cảm ơn rất nhiều vì đã chia sẻ kiến ​​thức của bạn!
oldboy

Tôi sẽ nhớ kỹ thuật tẩy trắng bạn đã sử dụng. Tôi thường đặt hình vuông màu đỏ xung quanh những phần quan trọng của ảnh chụp màn hình, bạn là rất nhiều đẹp hơn.
aaaaaa
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.