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> Vorfahren im Nutzer-Koordinatensystem. Wenn vorhanden, überschreibt sie das y Attribut des Elements.

Hinweis: Die y Eigenschaft gilt nur für verschachtelte <rect>, <image>, <foreignObject>, und <svg> Elemente in einem <svg>. 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 erlaubten Einheit ausgedrückt werden.

<percentage>

Prozentsätze beziehen sich auf die Höhe des SVG viewBox, wenn 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-Koordinate von SVG-Formen

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von y und wie die CSS y Eigenschaft das y Attribut überlagert.

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 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 stylen alle Rechtecke mit einem schwarzen Rand und machen sie leicht transparent, damit überlappende Rechtecke sichtbar sind. Wir versehen die Rechtecke 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 bei 10 (vom Attribut), -20px, 4em und 60%. Das Rechteck ist 40px hoch, daher befindet sich die Hälfte des roten Rechtecks bei -20px außerhalb des Viewports. Das SVG ist 150px hoch, sodass sich die obere Seite des orangefarbenen Rechtecks 90px vom oberen Rand des SVG Viewports befindet.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# Y

Browser-Kompatibilität

Siehe auch