Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzung reaktiviert werden.

preserveAspectRatio

« SVG Attribute reference home

In einigen Fällen, meistens wenn man das viewBox (en-US) Attribut benutzt, ist es wünschenswert die Grafik so zu skalieren, dass sie auch mit ungleichem (non-uniform) Seitenverhältnis den gesamten viewport einnimmt. Ein anderer Fall wäre es, mit gleichmäßiger (uniform) Skalierung die Seitenverhältnise der Grafik beizubehalten.

Das Attribut preserveAspectRatio legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.

Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem <image> (en-US) Element, ist preserveAspectRatio nur wirksam, wenn auch ein Wert für viewBox (en-US) im gleichen Element angegeben wurde. Für diese Elemente ist, wenn das Attribut viewBox (en-US) nicht angegeben wurde, preserveAspectRatio nicht aktiviert.

In <image> (en-US) Elementen, gibt preserveAspectRatio an, wie die darin verlinkten Bilder sich in den Referenz-Rahmen einpassen und ob die Seitenverhältnisse des verlinkten Bildes, unter Beachtung des momentanen Benutzer-Koordinatensystems, beibehalten werden sollen.

Verwendungskontext

Kategorien None
Inhalt <align> [<meetOrSlice>]
Animierbar Ja
Normative document SVG 1.1 (2nd Edition)
<align>
Der <align> Parameter bestimmt ob gleichmäßige Skalierung benutzt wird und wenn dies der Fall ist, die Ausrichtungs-Methode die genutzt wird, im Fall, dass das Seitenverhältnis der viewBox (en-US)  nicht dem Seitenverhältnis des viewports entspricht. Der <align> Parameter muss einen der folgenden Werte enthalten:
  • none
    Keine einheitliche Skalierung erzwingen. Skaliere die Grafiken des gegebenen Elements ungleichmäßig, wenn notwendig, so dass die bounding-box (Begrenzungs-Rahmen) exakt dem viewport-rectangle (Rechteck des Sichtbereichs) entspricht.
    (Bemerkung: Wenn <align> den Wert none enthält, wird der Wert für <meetOrSlice> ignoriert.)
  • xMinYMin - Erzwinge gleichmäßige Skalierung.
    Richte <min-x> der Element-viewBox (en-US) am kleinsten X-Wert des viewports aus.
    Richte <min-y> der Element-viewBox (en-US) am kleinsten Y-Wert des viewports aus.
  • xMidYMin - Erzwinge gleichmäßige Skalierung.
    Richte den X-Wert des Mittelpunktes der Element-viewBox (en-US) am X-Wert des viewport-Mittelpunktes aus.
    Richte den  <min-y> der Element-viewBox (en-US) am kleinsten Y-Wert des viewports aus.
  • xMaxYMin - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox (en-US) with the maximum X value of the viewport.
    Align the <min-y> of the element's viewBox (en-US) with the smallest Y value of the viewport.
  • xMinYMid - Force uniform scaling.
    Align the <min-x> of the element's viewBox (en-US) with the smallest X value of the viewport.
    Align the midpoint Y value of the element's viewBox (en-US) with the midpoint Y value of the viewport.
  • xMidYMid (the default) - Force uniform scaling.
    Align the midpoint X value of the element's viewBox (en-US) with the midpoint X value of the viewport.
    Align the midpoint Y value of the element's viewBox (en-US) with the midpoint Y value of the viewport.
  • xMaxYMid - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox (en-US) with the maximum X value of the viewport.
    Align the midpoint Y value of the element's viewBox (en-US) with the midpoint Y value of the viewport.
  • xMinYMax - Force uniform scaling.
    Align the <min-x> of the element's viewBox (en-US) with the smallest X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox (en-US) with the maximum Y value of the viewport.
  • xMidYMax - Force uniform scaling.
    Align the midpoint X value of the element's viewBox (en-US) with the midpoint X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox (en-US) with the maximum Y value of the viewport.
  • xMaxYMax - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox (en-US) with the maximum X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox (en-US) with the maximum Y value of the viewport.
<meetOrSlice>
The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:
  • meet (the default) - Scale the graphic such that:
    • aspect ratio is preserved
    • the entire viewBox (en-US) is visible within the viewport
    • the viewBox (en-US) is scaled up as much as possible, while still meeting the other criteria
    In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the viewBox (en-US) (i.e., the area into which the viewBox (en-US) will draw will be smaller than the viewport).
  • slice - Scale the graphic such that:
    • aspect ratio is preserved
    • the entire viewport is covered by the viewBox (en-US)
    • the viewBox (en-US) is scaled down as much as possible, while still meeting the other criteria
    In this case, if the aspect ratio of the viewBox (en-US) does not match the viewport, some of the viewBox (en-US) will extend beyond the bounds of the viewport (i.e., the area into which the viewBox (en-US) will draw is larger than the viewport).

Example

Elements

The following elements can use the preserveAspectRatio attribute