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
/* 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
| Anfangswert | 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
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.
<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.
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
Loading…