preserveAspectRatio

Das preserveAspectRatio-Attribut gibt an, wie ein Element mit einem viewBox, das ein bestimmtes Seitenverhältnis bereitstellt, in einen Viewport mit einem anderen Seitenverhältnis passen muss.

Das Seitenverhältnis eines SVG-Bildes wird durch das viewBox-Attribut definiert. Daher hat preserveAspectRatio keine Auswirkungen auf das Skalieren von SVGs, wenn viewBox nicht gesetzt ist (außer im Fall des <image>-Elements, bei dem preserveAspectRatio anders funktioniert, wie unten beschrieben).

Syntax

preserveAspectRatio="<align> [<meet or slice>]"

Der Wert des preserveAspectRatio-Attributs besteht aus bis zu zwei Schlüsselwörtern: einem erforderlichen Ausrichtungswert und einem optionalen meet oder slice-Schlüsselwort.

Der Ausrichtungswert gibt an, ob eine gleichmäßige Skalierung erzwungen werden soll, und falls ja, die Ausrichtungsmethode, die verwendet werden soll, wenn das Seitenverhältnis des viewBox nicht mit dem Seitenverhältnis des Viewports übereinstimmt. xMidYMid ist der Standardwert. Der Ausrichtungswert muss einer der folgenden Schlüsselwortwerte sein:

none: Erzwingt keine gleichmäßige Skalierung. Skaliert den grafischen Inhalt des angegebenen Elements bei Bedarf ungleichmäßig, sodass die Begrenzungsbox des Elements genau mit dem Rechteck des Viewports übereinstimmt. Beachten Sie, dass wenn <align> none ist, der optionale <meetOrSlice>-Wert ignoriert wird.
xMinYMin: Erzwingt eine gleichmäßige Skalierung. Die <min-x> des viewBox des Elements wird mit dem kleinsten X-Wert des Viewports ausgerichtet. Die <min-y> des viewBox des Elements wird mit dem kleinsten Y-Wert des Viewports ausgerichtet.
xMidYMin: Erzwingt eine gleichmäßige Skalierung. Der mittlere X-Wert des viewBox des Elements wird mit dem mittleren X-Wert des Viewports ausgerichtet. Die <min-y> des viewBox des Elements wird mit dem kleinsten Y-Wert des Viewports ausgerichtet.
xMaxYMin: Erzwingt eine gleichmäßige Skalierung. Die <min-x>+<width> des viewBox des Elements wird mit dem maximalen X-Wert des Viewports ausgerichtet. Die <min-y> des viewBox des Elements wird mit dem kleinsten Y-Wert des Viewports ausgerichtet.
xMinYMid: Erzwingt eine gleichmäßige Skalierung. Die <min-x> des viewBox des Elements wird mit dem kleinsten X-Wert des Viewports ausgerichtet. Der mittlere Y-Wert des viewBox des Elements wird mit dem mittleren Y-Wert des Viewports ausgerichtet.
xMidYMid: Erzwingt eine gleichmäßige Skalierung. Der mittlere X-Wert des viewBox des Elements wird mit dem mittleren X-Wert des Viewports ausgerichtet. Der mittlere Y-Wert des viewBox des Elements wird mit dem mittleren Y-Wert des Viewports ausgerichtet. Dies ist der Standardwert.
xMaxYMid: Erzwingt eine gleichmäßige Skalierung. Die <min-x>+<width> des viewBox des Elements wird mit dem maximalen X-Wert des Viewports ausgerichtet. Der mittlere Y-Wert des viewBox des Elements wird mit dem mittleren Y-Wert des Viewports ausgerichtet.
xMinYMax: Erzwingt eine gleichmäßige Skalierung. Die <min-x> des viewBox des Elements wird mit dem kleinsten X-Wert des Viewports ausgerichtet. Die <min-y>+<height> des viewBox des Elements wird mit dem maximalen Y-Wert des Viewports ausgerichtet.
xMidYMax: Erzwingt eine gleichmäßige Skalierung. Der mittlere X-Wert des viewBox des Elements wird mit dem mittleren X-Wert des Viewports ausgerichtet. Die <min-y>+<height> des viewBox des Elements wird mit dem maximalen Y-Wert des Viewports ausgerichtet.
xMaxYMax: Erzwingt eine gleichmäßige Skalierung. Die <min-x>+<width> des viewBox des Elements wird mit dem maximalen X-Wert des Viewports ausgerichtet. Die <min-y>+<height> des viewBox des Elements wird mit dem maximalen Y-Wert des Viewports ausgerichtet.

Die folgenden zwei Schlüsselwörter bestimmen, wie das SVG relativ zu den Grenzen des Containers skaliert werden soll. Die Angabe des meet- oder slice-Verweises ist optional, und wenn angegeben, muss es eines von zwei Schlüsselwörtern sein. meet ist der Standardwert.

meet

Skaliert die Grafik so, dass:

Das Seitenverhältnis beibehalten wird.
Das gesamte viewBox innerhalb des Viewports sichtbar ist.
Das viewBox so weit wie möglich vergrößert wird, während die anderen Kriterien beibehalten werden.

In diesem Fall, wenn das Seitenverhältnis der Grafik nicht mit dem Viewport übereinstimmt, wird ein Teil des Viewports über die Grenzen des viewBox hinausgehen (d.h. der Bereich, in dem das viewBox zeichnet, wird kleiner als der Viewport sein).

slice

Skaliert die Grafik so, dass:

Das Seitenverhältnis beibehalten wird.
Der gesamte Viewport vom viewBox abgedeckt ist.
Das viewBox so weit wie möglich verkleinert wird, während die anderen Kriterien beibehalten werden.

In diesem Fall, wenn das Seitenverhältnis des viewBox nicht mit dem Viewport übereinstimmt, wird ein Teil des viewBox über die Grenzen des Viewports hinausgehen (d.h. der Bereich, in dem das viewBox zeichnet, ist größer als der Viewport).

Beispiele

Verwendung von `meet`, wenn die Breite > Höhe ist

Dieses Beispiel zeigt die Verwendung von meet, wenn die width des Elements größer als seine height ist. Es präsentiert drei Variationen, mit drei verschiedenen Ausrichtungswerten: xMidYMid, xMinYMid und xMaxYMid.

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

html

<rect x="0" y="0" width="60" height="30">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="0" width="60" height="30">
  <title>xMinYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMinYMid meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="140" y="0" width="60" height="30">
  <title>xMaxYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMaxYMid meet"
  x="140"
  y="0">
  <use href="#smiley" />
</svg>

html

</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Verwendung von `slice`, wenn die Breite > Höhe ist

Dieses Beispiel zeigt die Verwendung von slice, wenn die width des Elements größer als seine height ist. Es präsentiert drei Variationen, mit drei verschiedenen Ausrichtungswerten: xMidYMin, xMidYMid und xMidYMax.

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 57" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

html

<rect x="0" y="15" width="60" height="30">
  <title>xMidYMin slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMin slice"
  x="0"
  y="15">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="15" width="60" height="30">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid slice"
  x="70"
  y="15">
  <use href="#smiley" />
</svg>

html

<rect x="140" y="15" width="60" height="30">
  <title>xMidYMax slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMax slice"
  x="140"
  y="15">
  <use href="#smiley" />
</svg>

html

</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Verwendung von `meet`, wenn die Höhe > Breite ist

Dieses Beispiel zeigt die Verwendung von meet, wenn die height des Elements größer als seine width ist. Es präsentiert drei Variationen, mit drei verschiedenen Ausrichtungswerten: xMidYMin, xMidYMid und xMidYMax.

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

html

<rect x="0" y="0" width="30" height="75">
  <title>xMidYMin meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMin meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid meet"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="0" width="30" height="75">
  <title>xMidYMax meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMax meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

html

</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Verwendung von `slice`, wenn die Höhe > Breite ist

Dieses Beispiel zeigt die Verwendung von slice, wenn die height des Elements größer als seine width ist. Es präsentiert drei Variationen, mit drei verschiedenen Ausrichtungswerten: xMinYMid, xMidYMid und xMaxYMid.

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

html

<rect x="0" y="0" width="30" height="75">
  <title>xMinYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMinYMid slice"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid slice"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="0" width="30" height="75">
  <title>xMaxYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMaxYMid slice"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

html

</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Verwendung des `none`-Ausrichtungswertes

Dieses Beispiel zeigt ein Element mit dem Ausrichtungswert none.

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 192 62" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

html

<!-- none -->
<rect x="0" y="0" width="160" height="60">
  <title>none</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="160"
  height="60"
  preserveAspectRatio="none"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Elemente

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

feImage

Für <feImage> definiert preserveAspectRatio, wie das referenzierte Bild in das vom <feImage>-Element definierte Rechteck passen soll.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

image

Für <image> definiert preserveAspectRatio, wie das referenzierte Bild in das vom <image>-Element definierte Rechteck passen soll.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

marker

Für <marker> gibt preserveAspectRatio an, ob eine gleichmäßige Skalierung durchgeführt werden muss, um den Viewport des Elements anzupassen.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

pattern

Für <pattern> gibt preserveAspectRatio an, ob eine gleichmäßige Skalierung durchgeführt werden muss, um den Viewport des Elements anzupassen.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

svg

Für <svg> gibt preserveAspectRatio an, ob eine gleichmäßige Skalierung durchgeführt werden muss, um den Viewport des Elements anzupassen.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

symbol

Für <symbol> gibt preserveAspectRatio an, ob eine gleichmäßige Skalierung durchgeführt werden muss, um den Viewport des Elements anzupassen.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

view

Für <view> gibt preserveAspectRatio an, ob eine gleichmäßige Skalierung durchgeführt werden muss, um den Viewport des Elements anzupassen.

Wert	<align> <meetOrSlice>?
Standardwert	`xMidYMid` `meet`
Animierbar	Ja

Spezifikationen

Spezifikation
Filter Effects Module Level 1 # element-attrdef-feimage-preserveaspectratio
Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden