y

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

Initialer Wert0
Anwendbar aufsvg, rect, image, and foreignobject elements in an 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