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-Achsenkoordinate der oberen linken Ecke der SVG <rect> Form, das <image> Bild, das <foreignObject> Ansichtsfenster oder das verschachtelte <svg> Ansichtsfenster relativ zum nächstgelegenen <svg> Vorfahren im Benutzerkoordinatensystem. Wenn vorhanden, überschreibt es 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 Auswirkungen auf die äußersten <svg> Elemente selbst und gilt nicht für andere SVG-Elemente noch 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-Achsenkoordinate der oberen linken Ecke des SVG-Elementcontainers an.

<length>

Als absolute oder relative Länge kann sie in jeder von der CSS <length> Datentyp erlaubten Einheit ausgedrückt werden.

<percentage>

Prozentsätze beziehen sich auf die Breite der SVG viewBox, falls angegeben, andernfalls bezieht sich der Prozentsatz auf die Breite des aktuellen SVG-Ansichtsfensters.

Formale Definition

Anfangswert0
Anwendbar auf<svg>, <rect>, <image>, and <foreignObject> elements in <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

Festlegen der x-Achsenkoordinaten von SVG-Formen

Dieses Beispiel demonstriert 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; die Werte ihrer x- und y-Attribute sind alle 10, was bedeutet, dass sich die vier Rechtecke alle an derselben Position befinden, 10px von der oberen und linken Ecke des SVG-Ansichtsfensters.

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 gestalten alle Rechtecke mit einem schwarzen Rand und leicht transparent, damit überlappende Rechtecke sichtbar sind. Wir versehen jedes Rechteck mit unterschiedlichen Füll- und x-Werten.

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, sodass sich die linke Seite des letzten Rechtecks bei der 150px-Markierung befindet.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# X

Browser-Kompatibilität

Siehe auch