`cx` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Die cx CSS-Eigenschaft definiert den Mittelpunkt der x-Achse 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 Pseudo-Elemente.

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 <length>- und <percentage>-Werte kennzeichnen den horizontalen Mittelpunkt des Kreises oder der Ellipse.

<length>: Als absolute oder relative Länge kann sie in jeder Einheit ausgedrückt werden, die vom CSS <length>-Datentyp zugelassen ist. Negative Werte sind ungültig.
<percentage>: Prozentsätze beziehen sich auf die Breite des aktuellen SVG-Viewports.

Formale Definition

Anfangswert	`0`
Anwendbar auf	`<ellipse>` and `<circle>` 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

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 das cx-Attribut überschreibt.

HTML

Wir fügen zwei identische <circle>- und zwei identische <ellipse>-Elemente in ein SVG ein; ihre cx-Attributwerte sind 50 bzw. 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 Standardstile verwenden (mit fill, das standardmäßig auf Schwarz gesetzt ist). Wir verwenden die cx-Eigenschaft, um den Wert des SVG-cx-Attributs zu überschreiben, und geben ihm auch eine fill- und stroke, um die ersten Formen in jedem Paar von ihrem Zwilling zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig 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

Der stilisierte Kreis hat seinen Mittelpunkt 30px vom linken Rand des SVG-Viewports entfernt und die stilisierte Ellipse ist 180px von diesem Rand entfernt, wie in den CSS-cx-Eigenschaftswerten definiert. Die ungestylten Formen haben ihre Mittelpunkte 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 dasselbe 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 ähnlich ist. Der einzige Unterschied ist der Wert der CSS-cx-Eigenschaft; 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 der Mittelpunkte des stilisierten Kreises und der Ellipse 30% bzw. 80% der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig 300px beträgt, sind die cx-Werte 90px und 240px vom linken Rand des SVG-Viewports entfernt.