cx

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 cx CSS Eigenschaft definiert den Mittelpunkt auf der x-Achse eines SVG-<circle>- oder <ellipse>-Elements. Wenn sie vorhanden ist, ü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 innerhalb eines <svg>. 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 den horizontalen Mittelpunkt des Kreises oder der Ellipse an.

<length>

Als absolute oder relative Länge kann es in jeder Maßeinheit ausgedrückt werden, die vom CSS-<length>-Datentyp erlaubt ist. Negative Werte sind ungültig.

<percentage>

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

Formale Definition

Initialer Wert0
Anwendbar aufellipse 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 Vorrang vor dem cx-Attribut hat.

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 gestalten wir nur den ersten Kreis und die erste Ellipse, sodass ihre Doppelgänger die Standardstile verwenden (mit fill, das standardmäßig schwarz ist). Wir verwenden die cx-Eigenschaft, um den Wert des SVG-cx-Attributs zu überschreiben und geben ihnen auch eine fill und stroke, um die ersten Formen in jedem Paar von ihren Doppelgängern zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig mit 300px Breite und 150px Höhe.

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 befindet sich 30px vom linken Rand des SVG-Viewports und die gestaltete Ellipse 180px von diesem Rand entfernt, wie in den CSS-cx-Eigenschaftswerten definiert. Die ungestalteten Formmittelpunkte sind 50px bzw. 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 ähnlich ist. Der einzige Unterschied ist der CSS-cx-Eigenschaftswert; in diesem Fall verwenden wir Prozentwerte von 30% für das <circle> und 80% für das <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 Mittelpunkts des gestalteten 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 bzw. 240px vom linken Rand des SVG-Viewports entfernt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CX

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch