x 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 x-CSS-Eigenschaft definiert die x-Achsen-Koordinate der oberen linken Ecke der SVG-Form <rect>, des Bildes <image>, des Viewports <foreignObject> oder eines verschachtelten <svg>-Viewports relativ zum Benutzer-Koordinatensystem des nächstgelegenen <svg>-Vorfahren. Falls die Eigenschaft angegeben ist, hat sie Vorrang vor dem x-Attribut des Elements.
Hinweis:
Die Eigenschaft x gilt nur für die Elemente <rect>, <image>, <foreignObject> und <svg>, die in einem <svg> verschachtelt sind. Sie hat keine Auswirkung auf das äußerste <svg>-Element und gilt weder 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 Werte <length> und <percentage> geben die Position der oberen linken Ecke des SVG-Element-Containers auf der x-Achse an.
<length>-
Eine absolute oder relative Länge, die in jeder Einheit angegeben werden kann, die der CSS-Datentyp
<length>erlaubt. <percentage>-
Prozentwerte beziehen sich auf die Breite der SVG-
viewBox, sofern diese angegeben ist. Andernfalls beziehen sie sich auf die Breite des aktuellen SVG-Viewports.
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
x-Achsen-Koordinaten von SVG-Formen festlegen
Dieses Beispiel zeigt die grundlegende Verwendung von x und wie die CSS-Eigenschaft x Vorrang vor dem Attribut x hat.
HTML
Wir fügen vier identische SVG-<rect>-Elemente ein. Die Werte ihrer Attribute x und y sind jeweils 10. Das bedeutet, dass sich alle vier Rechtecke an derselben Position befinden, jeweils 10px vom oberen und linken Rand des SVG-Viewports 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 geben allen Rechtecken einen schwarzen Rand und machen sie leicht transparent, damit überlappende Rechtecke sichtbar sind. Jedes Rechteck erhält unterschiedliche Werte für die Füllung und x.
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;
}
Ergebnis
Die linken Kanten der Rechtecke liegen bei 10 (aus dem Attribut), 3em, 180px beziehungsweise 50%. Das SVG ist 300px breit. Daher liegt die linke Kante des letzten Rechtecks bei 150px.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # X |