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

css
/* 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 Wert0
Anwendbar aufsvg, rect, image, and foreignobject elements in an svg
VererbtNein
Prozentwerterefer to the width of the current SVG viewport
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
Animationstypby 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.

html
<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.

css
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

Siehe auch