cx

Syntax

/* 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> bezeichnen das horizontale Zentrum des Kreises oder der Ellipse.

<length>

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

<percentage>

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

Formale Definition

Formale Syntax

cx = 
  <length-percentage>  

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

Beispiele

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

Dieses Beispiel zeigt die grundlegende Verwendung von cx und wie die CSS-Eigenschaft cx 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.

<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 Twin-Formen die 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 ihnen auch ein fill und stroke, um die ersten Formen in jedem Paar von ihren Zwillingen zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig mit einer Breite von 300px und einer Höhe von 150px.

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 stilisierten Kreises ist 30px vom linken Rand des SVG-Ansichtsfensters entfernt, und die stilisierte Ellipse ist 180px von diesem Rand entfernt, wie in den CSS-cx-Eigenschaftswerten definiert. Die nicht gestylten Formen haben ihre Mittelpunkte 50px und 150px vom linken Rand des SVG-Ansichtsfensters 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.

<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 des vorherigen Beispiels ä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>.

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 beziehen sich die Werte auf die Breite des SVG-Ansichtsfensters. Hier sind die x-Achsen-Koordinaten des Mittelpunkts des Stilkeks und der Ellipse jeweils 30% und 80% der Breite des aktuellen SVG-Ansichtsfensters. Da die Breite auf 300px voreingestellt war, sind die cx-Werte 90px und 240px vom linken Rand des SVG-Ansichtsfensters entfernt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVG-cx-Attribut
• Geometrie-Eigenschaften: cx, cy, r, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• border-radius Kurzformeigenschaft
• radial-gradient
• <basic-shape> Datentyp