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:
• align:
  • none – keine gleichmäßige Skalierung. Die viewBox wird in X- und Y-Richtung ohne Rücksicht auf das Seitenverhältnis gestreckt, sodass sie das svg-Element ausfüllt.
  • xMinYMin – erzwinge gleichmäßiges Skalieren.
    Richte <min-x> der viewBox mit dem kleinsten X-Wert des Viewports aus.
    Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
  • xMidYMin – erzwinge gleichmäßiges Skalieren.
    Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
    Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
  • xMaxYMin – erzwinge gleichmäßiges Skalieren.
    Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
    Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
  • xMinYMid – erzwinge gleichmäßiges Skalieren.
    Richte <min-x> der viewBox am kleinsten X-Wert des Viewports aus.
    Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
  • xMidYMid (Standardwert) – erzwinge gleichmäßiges Skalieren.
    Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
    Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
  • xMaxYMid – erzwinge gleichmäßiges Skalieren.
    Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
    Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
  • xMinYMax – erzwinge gleichmäßiges Skalieren.
    Richte <min-x> der viewBox mit dem kleinsten X-Wert des Viewports aus.
    Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
  • xMidYMax – erzwinge gleichmäßiges Skalieren.
    Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
    Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
  • xMaxYMax – erzwinge gleichmäßiges Skalieren.
    Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
    Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
• 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 kleinste 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