y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 nächstgelegenen <svg>-Vorfahrers im Benutzer-Koordinatensystem. Wenn 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 weder 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 <length>- und <percentage>-Werte geben die y-Achsen-Koordinatenposition der oberen linken Ecke des SVG-Elements an.

<length>

Als absolute oder relative Länge kann es in jeder Einheit ausgedrückt werden, die vom CSS <length>-Datentyp erlaubt ist.

<percentage>

Prozentsätze beziehen sich auf die Höhe des SVG-viewBox, falls deklariert, andernfalls bezieht sich der Prozentsatz 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 zeigt die grundlegende Verwendung von y und wie die CSS y-Eigenschaft das y-Attribut überlagert.

HTML

Wir fügen vier identische SVG-<rect>-Elemente ein; ihre x- und y-Attributwerte betragen alle 10, was bedeutet, dass sich die vier Rechtecke alle an derselben Stelle befinden, 10px von der oberen und linken Ecke des SVG-Viewports entfernt.

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 einem schwarzen Rand und leicht transparenter Füllung, damit überlappende Rechtecke sichtbar sind. Wir versehen das Rechteck mit unterschiedlichen fill und y-Werten.

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 jeweils bei 10 (vom Attribut), -20px, 4em und 60%. Das Rechteck ist 40px hoch, sodass die -20px die obere Hälfte des roten Rechtecks außerhalb des Viewports platzieren. Das SVG ist 150px hoch, sodass die obere Seite des orangefarbenen Rechtecks 90px von der oberen Seite des SVG-Viewports entfernt ist.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# Y

Browser-Kompatibilität

Siehe auch