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

BCD tables only load in the browser

Siehe auch