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
/* 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 Wert | 0 |
---|---|
Anwendbar auf | svg , rect , image , and foreignobject elements in svg |
Vererbt | Nein |
Prozentwerte | refer to the height of the current SVG viewport |
Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | by 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.
<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.
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