y CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
Die CSS-Eigenschaft y definiert die y-Achsen-Koordinate der oberen linken Ecke einer SVG-<rect>-Form, eines <image>-Bildes sowie der Viewports von <foreignObject> und eines verschachtelten <svg>. Die Koordinate bezieht sich auf das Benutzer-Koordinatensystem des nächstgelegenen übergeordneten <svg>-Elements. Ist die Eigenschaft angegeben, überschreibt sie das y-Attribut des Elements.
Hinweis:
Die Eigenschaft y gilt nur für <rect>-, <image>-, <foreignObject>- und <svg>-Elemente, die in einem <svg> verschachtelt sind. Sie hat keine Auswirkungen auf äußerste <svg>-Elemente und gilt weder für andere SVG-Elemente noch für HTML-Elemente oder 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 Werte <length> und <percentage> geben die Position der oberen linken Ecke des SVG-Elements auf der y-Achse an.
<length>-
Als absolute oder relative Länge kann der Wert in jeder Einheit angegeben werden, die der CSS-Datentyp
<length>zulässt. <percentage>-
Prozentwerte beziehen sich auf die Höhe der SVG-
viewBox, sofern diese definiert ist. Andernfalls beziehen sie sich 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
y-Achsen-Koordinaten von SVG-Formen festlegen
Dieses Beispiel zeigt die grundlegende Verwendung von y und wie die CSS-Eigenschaft y Vorrang vor dem Attribut y hat.
HTML
Wir fügen vier identische SVG-<rect>-Elemente ein. Ihre Attributwerte für x und y sind jeweils 10. Damit befinden sich alle vier Rechtecke an derselben Position, jeweils 10px vom oberen und linken Rand 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 geben allen Rechtecken einen schwarzen Rand und machen sie leicht transparent, damit überlappende Rechtecke sichtbar sind. Den Rechtecken weisen wir unterschiedliche Werte für fill und y zu.
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;
}
Ergebnis
Die oberen Kanten der Rechtecke liegen bei 10 (aus dem Attribut), -20px, 4em beziehungsweise 60%. Die Rechtecke sind 40px hoch. Bei -20px liegt daher die Hälfte des roten Rechtecks außerhalb des Viewports. Das SVG ist 150px hoch; die obere Kante des orangefarbenen Rechtecks befindet sich somit 90px vom oberen Rand des SVG-Viewports entfernt.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # Y |