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-Achsenkoordinate der oberen linken Ecke der SVG <rect> Form, <image> Bild, <foreignObject> Ansicht oder des verschachtelten <svg> Ansichtsbereichs relativ zum Benutzer-Koordinatensystem des nächstgelegenen <svg>-Vorfahrens. Falls vorhanden, überschreibt sie das x Attribut des Elements.
Hinweis:
Die x Eigenschaft gilt nur für in einem <svg> verschachtelte <rect>, <image>, <foreignObject> und <svg> Elemente. Sie hat keinen Effekt 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 geben die x-Achsenkoordinatenposition der oberen linken Ecke des SVG-Elementcontainers an.
<length>-
Als absolute oder relative Länge kann sie in jeder vom CSS
<length>Datentyp zulässigen Einheit ausgedrückt werden. <percentage>-
Prozentsätze beziehen sich auf die Breite des SVG
viewBox, falls deklariert, ansonsten bezieht sich der Prozentsatz auf die Breite des aktuellen SVG-Ansichtsbereichs.
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
Definition der x-Achsenkoordinaten von SVG-Formen
Dieses Beispiel zeigt den grundlegenden Anwendungsfall von x und wie die CSS x Eigenschaft Vorrang vor dem x Attribut hat.
HTML
Wir fügen vier identische SVG <rect> Elemente ein; ihre x und y Attributswerte sind alle 10, was bedeutet, dass die vier Rechtecke sich alle an derselben Stelle befinden, 10px von der oberen und linken Ecke des SVG-Ansichtsbereichs 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 stilisieren alle Rechtecke so, dass sie einen schwarzen Rand haben und leicht transparent sind, damit überlappende Rechtecke sichtbar sind. Wir geben jedem Rechteck unterschiedliche Füll- und x Werte.
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 befinden sich jeweils bei 10 (vom Attribut), 3em, 180px und 50%. Das SVG ist 300px breit, daher befindet sich die linke Seite des letzten Rechtecks bei der 150px-Markierung.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # X |
Browser-Kompatibilität
Loading…