Thanks to visit codestin.com
Credit goes to developer.mozilla.org

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2020⁩.

Die y CSS Eigenschaft definiert die y-Achsen-Koordinate der linken oberen 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. Falls 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 und Pseudoelemente.

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 linken oberen Ecke des SVG-Elements an.

<length>

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

<percentage>

Prozentwerte beziehen sich auf die Höhe der SVG viewBox, falls deklariert. Andernfalls bezieht sich der Prozentwert 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

Definition der y-Achsen-Koordinaten von SVG-Formen

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

HTML

Wir fügen vier identische SVG <rect> Elemente ein; deren x und y Attributwerte sind alle 10, was bedeutet, dass die vier Rechtecke sich 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 Rahmen und machen sie leicht transparent, sodass ü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 bei 10 (vom Attribut), -20px, 4em und 60%. Das Rechteck ist 40px hoch, sodass -20px die Hälfte des roten Rechtecks außerhalb des Viewports platziert. Das SVG ist 150px hoch, sodass sich die obere Seite des orangefarbenen Rechtecks 90px von der Oberseite des SVG-Viewports entfernt befindet.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# Y

Browser-Kompatibilität

Siehe auch