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ächstgelegenen <svg> Vorfahren. 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, 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 sie in jeder vom CSS <length> Datentyp zugelassenen Einheit ausgedrückt werden.

<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 demonstriert den grundlegenden Anwendungsfall von y und wie die CSS y Eigenschaft Vorrang vor dem y Attribut hat.

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 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 transparent, damit überlappende Rechtecke sichtbar sind. Wir geben dem Rechteck 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 liegen jeweils bei 10 (vom Attribut), -20px, 4em und 60%. Das Rechteck ist 40px hoch, somit befindet sich die Hälfte des roten Rechtecks bei -20px außerhalb des Viewports. Das SVG ist 150px hoch, sodass die obere Seite des orangefarbenen Rechtecks 90px von der Oberseite 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