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

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Hinweis: Das SVG-Attribut cx ist zwar auch für das SVG-Element <radialGradient> relevant, die Eigenschaft cx gilt jedoch nur für Elemente <circle> und <ellipse> innerhalb eines <svg>. Sie gilt weder 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 die horizontale Position des Mittelpunkts des Kreises oder der Ellipse an.

<length>: Eine absolute oder relative Länge, die in jeder vom CSS-Datentyp <length> zugelassenen Einheit angegeben werden kann. Negative Werte sind ungültig.
<percentage>: Prozentwerte 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

x-Achsen-Koordinate eines Kreises und einer Ellipse festlegen

Dieses Beispiel zeigt die grundlegende Verwendung von cx und wie die CSS-Eigenschaft cx Vorrang vor dem Attribut cx hat.

HTML

Wir fügen jeweils zwei identische <circle>- und <ellipse>-Elemente in ein SVG ein. Ihre cx-Attributwerte sind 50 beziehungsweise 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 gestalten wir nur den ersten Kreis und die erste Ellipse. Die jeweils zweite Form behält ihre Standarddarstellung bei (fill ist standardmäßig schwarz). Mit der Eigenschaft cx überschreiben wir den Wert des SVG-Attributs cx. Außerdem legen wir fill und stroke fest, um die erste Form jedes Paars von der zweiten zu unterscheiden. Browser stellen SVG-Bilder standardmäßig mit einer Breite von 300px und einer Höhe von 150px dar.

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 Mittelpunkt des gestalteten Kreises liegt 30px vom linken Rand des SVG-Viewports entfernt, der der gestalteten Ellipse 180px. Diese Positionen werden durch die CSS-Werte der Eigenschaft cx festgelegt. Die Mittelpunkte der nicht gestalteten Formen liegen entsprechend ihren SVG-Attributwerten für cx 50px beziehungsweise 150px vom linken Rand des SVG-Viewports entfernt.

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 ähnliches CSS wie im vorherigen Beispiel. Der einzige Unterschied ist der Wert der CSS-Eigenschaft cx: Hier verwenden wir 30% für <circle> und 80% für <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 Prozentwerten für cx beziehen sich die Werte auf die Breite des SVG-Viewports. Hier liegen die x-Achsen-Koordinaten der Mittelpunkte des gestalteten Kreises und der gestalteten Ellipse bei 30% beziehungsweise 80% der Breite des aktuellen SVG-Viewports. Da die Breite standardmäßig 300px beträgt, liegen die cx-Werte 90px beziehungsweise 240px vom linken Rand des SVG-Viewports entfernt.