y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die y CSS-Eigenschaft definiert die y-Achsen-Koordinate der oberen linken Ecke der SVG-<rect>-Form, des <image>-Bildes, des <foreignObject>-Viewports und des verschachtelten <svg>-Viewports relativ zum Benutzer-Koordinatensystem des nächsten <svg>-Vorfahrens. Falls vorhanden, überschreibt sie das y-Attribut des Elements.

Hinweis: Die y-Eigenschaft gilt nur für <rect>-, <image>-, <foreignObject>- und <svg>-Elemente, die in einem <svg> verschachtelt sind. Sie hat keine Wirkung auf äußerste <svg>-Elemente und gilt nicht für andere SVG-Elemente noch für HTML-Elemente oder Pseudo-Elemente.

Syntax

css
/* length and percentage values */
y: 10px;
y: 10%;

/* Global values */
y: inherit;
y: initial;
y: revert;
y: revert-layer;
y: unset;

Werte

Die Werte <length> und <percentage> geben die y-Achsen-Koordinatenposition der oberen linken Ecke des SVG-Elements an.

<length>

Als eine absolute oder relative Länge kann sie in jeder Einheit angegeben werden, die vom CSS-Datentyp <length> erlaubt ist.

<percentage>

Prozentwerte beziehen sich auf die Höhe der SVG-viewBox, falls vorhanden, andernfalls beziehen sich die Prozente auf die Höhe des aktuellen SVG-Viewports.

Formale Definition

Anfangswert0
Anwendbar auf<svg>, <rect>, <image>, and <foreignObject> elements in <svg>
VererbtNein
Prozentwerterefer to the height of the current SVG viewport
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
Animationstypby computed value type

Formale Syntax

y = 
<length-percentage>

<length-percentage> =
<length> |
<percentage>

Beispiele

Definieren der y-Achsen-Koordinaten von SVG-Formen

Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von y und wie die CSS-y-Eigenschaft das y-Attribut übergeht.

HTML

Wir fügen vier identische SVG-<rect>-Elemente ein. Ihre x- und y-Attributwerte sind alle 10, was bedeutet, dass sich alle vier Rechtecke an derselben Stelle befinden, 10px vom oberen und linken Rand des SVG-Viewports.

html
<svg>
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
</svg>

CSS

Wir gestalten alle Rechtecke mit einer schwarzen Umrandung und leicht transparenter Füllung, sodass sich überlappende Rechtecke sichtbar sind. Wir geben den Rechtecken unterschiedliche fill- und y-Werte.

css
svg {
  border: 1px solid;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  y: -20px;
  fill: red;
}

rect:nth-of-type(3) {
  y: 4em;
  fill: yellow;
}

rect:nth-of-type(4) {
  y: 60%;
  fill: orange;
}

Ergebnisse

Die oberen Kanten der Rechtecke befinden sich bei 10 (durch das Attribut), -20px, 4em und 60%. Die Höhe des Rechtecks beträgt 40px, daher befindet sich die Hälfte des roten Rechtecks bei -20px außerhalb des Viewports. Das SVG ist 150px hoch, daher befindet sich die Oberkante des orangefarbenen Rechtecks 90px vom oberen Rand des SVG-Viewports entfernt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# Y

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch