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 nächsten <svg> Vorfahren 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 Auswirkung auf äußerste <svg> Elemente und gilt nicht für andere SVG-Elemente oder 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 des Typs <length> und <percentage> geben die Position der y-Achsen-Koordinate der oberen linken Ecke des SVG-Elements an.

<length>

Als absolute oder relative Länge kann sie in jeder vom CSS <length> Datentyp erlaubten Einheit ausgedrückt werden.

<percentage>

Prozentsätze beziehen sich auf die Höhe des SVG viewBox, falls deklariert, andernfalls beziehen sie sich 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 überschreibt.

HTML

Wir fügen vier identische SVG <rect> Elemente ein; deren x und y Attributwerte sind alle 10, was bedeutet, dass sich die vier Rechtecke alle an derselben Stelle befinden, 10px vom oberen und linken Rand 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 stylen alle Rechtecke mit einem schwarzen Rand und machen sie leicht transparent, sodass ü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 jeweils bei 10 (vom Attribut), -20px, 4em und 60%. Das Rechteck ist 40px hoch, sodass -20px das rote Rechteck zur Hälfte außerhalb des Viewports platziert. Das SVG ist 150px hoch, sodass die Oberseite des orangefarbenen Rechtecks 90px vom oberen Rand des SVG-Viewports entfernt ist.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# Y

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch