Wartości SVG i viewBox


14

Jestem ciekawy, czy ktoś wie, w jaki sposób określane są viewBoxwartości (tj. viewBox="a b c d").

Próbuję zrozumieć funkcjonalność Inkscape SVG, więc utworzyłem dokument w Inkscape, czyli 100pxx 100px, narysowałem linię od lewej strony rzutni (tj. 0Wartość pozioma) do prawej strony (tj. 100Wartość pozioma) .

O dziwo jednak, kiedy zapisać dokument jako zwykły plik SVG, a następnie otwórz plik w edytorze tekstu, viewBoxwartości są ustawione viewBox="0 0 26.458333 26.458334", zamiast, powiedzmy viewBox="0 0 100 100".

Czy ktoś wie, w jaki sposób określa się te wartości ( 0 0 26.458333 26.458334) i dlaczego pozornie nie ma związku między nimi a wymiarami rzutni?

PS Wiem, że możesz edytować viewBoxwłaściwość ręcznie w opcjach dokumentu, ale wciąż jestem ciekawy, dlaczego Inkscape ustawia je na funky.

Odpowiedzi:


19

Inkscape używa mm jako domyślnej jednostki wyświetlania lub jednostki użytkownika dla dokumentu. Jednostki użytkownika służą do przechowywania wartości w pliku SVG.

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

Ten znacznik opisuje rozmiar rysunku 100px x 100px. Atrybut viewBox definiuje 100px x 100pxodpowiednik 26.458333 x 26.458333 user units.

Współczynnik skalowania SVG mógłby być 1px / 0.2645 user-unitwykorzystany przez renderer SVG do konwersji wszystkich wartości przechowywanych w jednostkach użytkownika na rzeczywiste wymiary rysunku.


W takim przypadku Inkscape chce przechowywać wartości mm, więc musi wiedzieć, w jaki sposób się pxodnosi mm. Specyfikacja CSS opisuje, że jednostki długości bezwzględnej są ustalone względem siebie:96px = 1in

To znaczy 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Stąd 26.45833333pochodzi.


Jeśli chcesz Inkscape do przechowywania wszystkich wartości w px, można zmienić domyślne stojaki lub user-jednostki do pxwe właściwościach dokumentu (Plik> Właściwości dokumentu> Zakładka: Strona Główna> Ogólne> Pokaż Units)

  1. Domyślnie, mm:

Właściwości dokumentu mm

  1. Zmieniono: px:

Właściwości dokumentu px

Wyeksportowanie tego samego dokumentu spowoduje powstanie następującego znacznika SVG:

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

Teraz współczynnik skali SVG wynosi 1px / 1 user-unit.

Jeśli chcesz dowiedzieć się więcej na ten temat, bardziej szczegółowe wyjaśnienie znajduje się na Wiki Inkscape

Uwagi:

  • Inkscape v0.92 używa relacji 96px/in, Inkscape v0.91, a wcześniej użył wartości90px/in

Łał. Bardzo interesujące. Był więc rym i powód. Wielkie dzięki za podzielenie się swoją wiedzą!
oldboy

Zapamiętam zastosowaną technikę zaciemnienia. Zwykle umieszczam czerwone kwadraty wokół ważnych części zrzutów ekranu, twoje są o wiele ładniejsze.
aaaaaa
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.