SVG
Element SVG
Szukaj…
viewBox
Atrybut viewBox definiuje układ współrzędnych dla elementu <svg>
. Umożliwia to łatwą zmianę rozmiaru i względnej proporcji grafiki SVG bez konieczności dostosowywania położenia i wymiarów każdego rysowanego elementu.
<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
Ten kod wygląda następująco:
Bez viewBox wygląda to tak:
zachowaj proporcje
preserveAspectRatio
to atrybut wskazujący, czy obraz powinien być skalowany równomiernie. Ten atrybut działa tylko wtedy, gdy element <svg>
ma również viewBox
.
Wartość domyślna to xMidYMid
, która utrzymuje współczynnik kształtu i centruje ścieżkę w kontenerze SVG:
<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
Gdy parametr preserveAspectRatio
ma wartość none
, ikona rozciąga się, aby pasować do pudełka:
<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
Istnieje wiele innych wartości dla preserveAspectRatio
, ale te dwie są zdecydowanie najczęstsze.
preserveAspectRatio - spełniają i wycinają atrybuty
Atrybut preserveAspectRatio
ma opcjonalny parametr: meet
| slice
. Zachowanie domyślne meet
który rozciąga się zawartość w obu wymiarach x i y, aż wypełni albo szerokości albo wysokości viewBox. Alternatywny slice
zachowuje proporcje zawartości, ale skaluje grafikę, aż wypełni zarówno szerokość, jak i wysokość viewbox (wycina zawartość, która przepełnia viewBox).
To jest przykład użycia slice
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
co jest renderowane jako:
i ten sam przykład z wykorzystaniem meet
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
co jest renderowane jako: