preserveAspectRatio

« SVG Attribute reference home

In einigen FĂ€llen, meistens wenn man das viewBox 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> Element, ist preserveAspectRatio nur wirksam, wenn auch ein Wert fĂŒr viewBox im gleichen Element angegeben wurde. FĂŒr diese Elemente ist, wenn das Attribut viewBox nicht angegeben wurde, preserveAspectRatio nicht aktiviert.

In <image> 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  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 am kleinsten X-Wert des viewports aus.
    Richte <min-y> der Element-viewBox am kleinsten Y-Wert des viewports aus.
  • xMidYMin - Erzwinge gleichmĂ€ĂŸige Skalierung.
    Richte den X-Wert des Mittelpunktes der Element-viewBox am X-Wert des viewport-Mittelpunktes aus.
    Richte den  <min-y> der Element-viewBox am kleinsten Y-Wert des viewports aus.
  • xMaxYMin - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox with the maximum X value of the viewport.
    Align the <min-y> of the element's viewBox with the smallest Y value of the viewport.
  • xMinYMid - Force uniform scaling.
    Align the <min-x> of the element's viewBox with the smallest X value of the viewport.
    Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport.
  • xMidYMid (the default) - Force uniform scaling.
    Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
    Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport.
  • xMaxYMid - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox with the maximum X value of the viewport.
    Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport.
  • xMinYMax - Force uniform scaling.
    Align the <min-x> of the element's viewBox with the smallest X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox with the maximum Y value of the viewport.
  • xMidYMax - Force uniform scaling.
    Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox with the maximum Y value of the viewport.
  • xMaxYMax - Force uniform scaling.
    Align the <min-x>+<width> of the element's viewBox with the maximum X value of the viewport.
    Align the <min-y>+<height> of the element's viewBox 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 is visible within the viewport
    • the viewBox 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 (i.e., the area into which the viewBox 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
    • the viewBox is scaled down as much as possible, while still meeting the other criteria
    In this case, if the aspect ratio of the viewBox does not match the viewport, some of the viewBox will extend beyond the bounds of the viewport (i.e., the area into which the viewBox will draw is larger than the viewport).

Example

Elements

The following elements can use the preserveAspectRatio attribute