SVG
SVG-elementet

viewBox

ViewBox-attributet definierar koordinatsystemet för ett <svg> -element. Detta gör att du enkelt kan ändra storleken och den relativa andelen av en SVG-grafik utan att behöva justera positionen och måtten för varje enskilt ritat element.

<!-- 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>

Den koden ser ut så här:

Utan viewBox ser det ut så här:

preserveAspectRatio

preserveAspectRatio är ett attribut som indikerar om bilden ska skalas enhetligt. Detta attribut fungerar bara om <svg> -elementet också har en viewBox .

Standardvärdet är xMidYMid , som upprätthåller bildförhållandet och centrerar sökvägen inuti SVG-behållaren:

<!-- 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>

När preserveAspectRatio är inställd på none sträcker sig ikonen så att den passar i rutan:

<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>

Det finns många andra värden för preserveAspectRatio , men dessa två är överlägset de vanligaste.

preserveAspectRatio - träffa och skiva attribut

Attributet preserveAspectRatio har en valfri parameter: meet | slice . Standardbeteendet är att meet vilket sträcker innehållet i både x- och y-dimensionen tills det fyller antingen bredden eller höjden på viewBox. Alternativet - slice bevarar innehållets bildförhållande, men skalar upp grafiken tills den fyller både bredden och höjden på visningsrutan (klipper ut innehållet som översvämmar viewBox).

Detta är exemplet med 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" />

som görs som:

och samma exempel med 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>

som görs som: