cx

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die cx CSS Eigenschaft definiert den x-Achsen-Mittelpunkt eines SVG-<circle>- oder <ellipse>-Elements. Falls vorhanden, überschreibt sie das cx-Attribut des Elements.

Hinweis: Während das SVG-cx-Attribut für das SVG-<radialGradient>-Element relevant ist, gilt die cx-Eigenschaft nur für <circle>- und <ellipse>-Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für <radialGradient> oder andere SVG-Elemente noch für HTML-Elemente oder Pseudoelemente.

Syntax

css
/* length and percentage values */
cx: 20px;
cx: 20%;

/* Global values */
cx: inherit;
cx: initial;
cx: revert;
cx: revert-layer;
cx: unset;

Werte

Die Werte <length> und <percentage> geben das horizontale Zentrum des Kreises oder der Ellipse an.

<length>

Als absolute oder relative Länge kann sie in jeder vom CSS-<length>-Datentyp erlaubten Einheit ausgedrückt werden. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die Breite des aktuellen SVG-Viewports.

Formale Definition

Anfangswert0
Anwendbar auf<ellipse> and <circle> 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

cx = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Definition der x-Achsen-Koordinate eines Kreises und einer Ellipse

Dieses Beispiel demonstriert den grundlegenden Anwendungsfall von cx und wie die CSS-cx-Eigenschaft gegenüber dem cx-Attribut Vorrang hat.

HTML

Wir fügen zwei identische <circle> und zwei identische <ellipse> Elemente in ein SVG ein; ihre cx-Attributwerte sind jeweils 50 und 150.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

CSS

Mit CSS stylen wir nur den ersten Kreis und die erste Ellipse, sodass ihre Zwillingsformen die Standardstile verwenden können (wobei fill standardmäßig auf schwarz gesetzt wird). Wir verwenden die cx-Eigenschaft, um den Wert des SVG-cx-Attributs zu überschreiben und geben ihm auch ein fill und stroke, um die ersten Formen in jedem Paar von ihrem Zwilling zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig als 300px breit und 150px hoch.

css
svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 180px;
  fill: pink;
  stroke: black;
}

Ergebnisse

Das Zentrum des gestylten Kreises befindet sich 30px vom linken Rand des SVG-Viewports entfernt und die gestylte Ellipse ist 180px von diesem Rand entfernt, wie in den CSS-cx-Eigenschaftswerten definiert. Die Zentren der ungestylten Formen sind 50px und 150px vom linken Rand des SVG-Viewports entfernt, wie in ihren SVG-cx-Attributwerten definiert.

x-Achsen-Koordinaten als Prozentwerte

Dieses Beispiel zeigt die Verwendung von Prozentwerten für cx.

HTML

Wir verwenden das gleiche Markup wie im vorherigen Beispiel.

html
<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

CSS

Wir verwenden CSS, das dem vorherigen Beispiel ähnelt. Der einzige Unterschied ist der CSS-cx-Eigenschaftswert; in diesem Fall verwenden wir Prozentwerte von 30% für den <circle> und 80% für die <ellipse>.

css
svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 80%;
  fill: pink;
  stroke: black;
}

Ergebnisse

Bei der Verwendung von Prozentwerten für cx sind die Werte relativ zur Breite des SVG-Viewports. Hier sind die x-Achsen-Koordinaten des Zentrums des gestylten Kreises und der Ellipse 30% bzw. 80% der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig 300px beträgt, liegen die cx-Werte 90px bzw. 240px vom linken Rand des SVG-Viewports entfernt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CX

Browser-Kompatibilität

Siehe auch