x
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die x
CSS Eigenschaft definiert die x-Achsen-Koordinate der oberen linken Ecke der SVG <rect>
-Form, <image>
-Bild, des <foreignObject>
-Viewports oder des verschachtelten <svg>
-Viewports relativ zum nächsten <svg>
-Vorfahren im Benutzer-Koordinatensystem. Ist diese Eigenschaft vorhanden, überschreibt sie das x
-Attribut des Elements.
Hinweis: Die x
-Eigenschaft gilt nur für <rect>
, <image>
, <foreignObject>
und verschachtelte <svg>
-Elemente in einem <svg>
. Sie hat keine Wirkung auf die äußersten <svg>
-Elemente selbst und gilt nicht für andere SVG-Elemente oder für HTML-Elemente oder Pseudo-Elemente.
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 x-Achse der oberen linken Ecke des SVG-Element-Containers an.
<length>
-
Als absolute oder relative Länge kann sie in jeder Einheit ausgedrückt werden, die vom CSS
<length>
Datentyp erlaubt ist. <percentage>
-
Prozentsätze beziehen sich auf die Breite des SVG
viewBox
, falls deklariert, andernfalls bezieht sich der Prozentsatz auf die Breite des aktuellen SVG-Viewports.
Formale Definition
Initialer Wert | 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-Achsen-Koordinaten von SVG-Formen
Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von x
und wie die CSS-x
-Eigenschaft Vorrang gegenüber dem x
-Attribut hat.
HTML
Wir fügen vier identische SVG <rect>
-Elemente ein; deren x
- und y
-Attributwerte sind alle 10
, was bedeutet, dass sich die vier Rechtecke alle an derselben Stelle befinden, 10px
vom oberen und linken Rand des SVG-Viewports.
<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 stylen alle Rechtecke mit einem schwarzen Rahmen und machen sie leicht transparent, sodass ü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 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
-Marke.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # X |
Browser-Kompatibilität
BCD tables only load in the browser