SVG/Attribut/preserveAspectRatio

Das preserveAspectRatio-Attribut legt fest, ob das Seitenverhältnis der viewBox dem des Viewport angepasst wird

Erlaubte Werte

ein oder zwei Angaben, durch Leerzeichen getrennt:

• genau eins der Folgenden:
  • none: Seitenverhältnis wird ignoriert
  • xMinYMin
  • xMidYMin
  • xMaxYMin
  • xMinYMid
  • xMidYMid: vertikal und horizontal zentriert
  • xMaxYMid
  • xMinYMax
  • xMidYMax
  • xMaxYMax
• höchstens eins der Folgenden (sonst wird meet angenommen):
  • meet: Die viewBox wird auf die größte Fläche skaliert, bei der nichts abgeschnitten wird (vgl. background-size:contain).
  • slice: Die viewBox wird auf die kleineste Fläche skaliert, bei der die komplette Fläche bedeckt ist, auch wenn dadurch etwas abgeschnitten wird (vgl. background-size:cover).

Standardwert

xMidYMid meet

anwendbar auf

svg, symbol, image, feImage, marker, pattern, view

Präsentationsattribut

nein

mit CSS animierbar

ja

Beispiel

<svg width="500" height="400"
     viewBox="0 0 250 600"
     preserveAspectRatio="none">

Das Seitenverhältnis wird nicht festgelegt

Beachten Sie: Ist der erste Wert none, wird der zweite ignoriert.

Siehe auch

• SVG/Tutorials/Einstieg/SVG in responsiven Webseiten

Weblinks

• Spezifikation (W3C): preserveAspectRatio
• MDN: preserveAspectRatio