x
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 x CSS-Eigenschaft definiert die x-Achsen-Koordinate der oberen linken Ecke der SVG <rect>-Form, des <image>-Bildes, des <foreignObject>-Ansichtsfensters oder eines verschachtelten <svg>-Ansichtsfensters relativ zum Nutzerkoordinatensystem des nächsten <svg>-Vorfahren. Wenn vorhanden, überschreibt sie das x-Attribut des Elements.
Hinweis: Die x-Eigenschaft gilt nur für <rect>, <image>, <foreignObject> und <svg>-Elemente, die in einem <svg> verschachtelt sind. Sie hat keine Auswirkung auf das äußerste <svg>-Element selbst und gilt nicht für andere SVG-Elemente noch für HTML-Elemente oder Pseudoelemente.
Syntax
/* length and percentage values */ x: 40px; x: 40%; /* Global values */ x: inherit; x: initial; x: revert; x: revert-layer; x: unset; Werte
Die <length>- und <percentage>-Werte kennzeichnen die x-Achsen-Koordinatenposition der oberen linken Ecke des SVG-Element-Containers.
<length>-
Als absolute oder relative Länge kann sie in jeder von CSS erlaubten Einheit des Datentyps
<length>ausgedrückt werden. <percentage>-
Prozentsätze beziehen sich auf die Breite des SVG-
viewBox, falls deklariert. Andernfalls bezieht sich der Prozentsatz auf die Breite des aktuellen SVG-Ansichtsfensters.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | <svg>, <rect>, <image>, and <foreignObject> elements in <svg> |
| Vererbt | Nein |
| Prozentwerte | refer to the width of the current SVG viewport |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
| Animationstyp | by computed value type |
Formale Syntax
x =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegen der x-Achsen-Koordinaten von SVG-Formen
Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von x und wie die CSS-x-Eigenschaft gegenüber dem x-Attribut Priorität hat.
HTML
Wir fügen vier identische SVG <rect>-Elemente ein; ihre x- und y-Attributwerte sind alle 10, was bedeutet, dass die vier Rechtecke alle an derselben Stelle sind, 10px von der oberen und linken Ecke des SVG-Ansichtsfensters entfernt.
<svg xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" x="10" y="10" /> <rect width="100" height="100" x="10" y="10" /> <rect width="100" height="100" x="10" y="10" /> <rect width="100" height="100" x="10" y="10" /> </svg> CSS
Wir gestalten alle Rechtecke mit einem schwarzen Rand und leicht transparent, sodass sich überlappende Rechtecke sichtbar sind. Wir versehen jedes Rechteck mit unterschiedlichen Füll- und x-Werten.
svg { border: 1px solid; width: 300px; } rect { fill: none; stroke: black; opacity: 0.8; } rect:nth-of-type(2) { x: 3em; fill: red; } rect:nth-of-type(3) { x: 180px; fill: yellow; } rect:nth-of-type(4) { x: 50%; fill: orange; } Ergebnisse
Die linken Kanten der Rechtecke sind bei 10 (vom Attribut), 3em, 180px und 50%, jeweils. Das SVG ist 300px breit, daher befindet sich die linke Seite des letzten Rechtecks auf der 150px-Markierung.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # X |