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 <length>- und <percentage>-Werte geben das horizontale Zentrum des Kreises oder der Ellipse an.

<length>

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

<percentage>

Prozentwerte beziehen sich auf die Breite des aktuellen SVG-Viewports.

Formale Definition

Formale Syntax

cx = 
  <length-percentage>  

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

Beispiele

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

Dieses Beispiel zeigt 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.

<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 Zwillingsformen die Standardstile verwenden (wobei fill standardmäßig schwarz ist). Wir verwenden die cx-Eigenschaft, um den Wert des SVG-cx-Attributs zu überschreiben und geben ihm zusätzlich ein fill und stroke, um die ersten Formen in jedem Paar von ihrem Zwilling zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig mit 300px Breite und 150px Höhe.

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 liegt 30px vom linken Rand des SVG-Viewports und die stilisierte Ellipse liegt 180px von diesem Rand entfernt, wie in den CSS-cx-Eigenschaftswerten definiert. Die nicht gestylten Formen befinden sich 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.

<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 besteht im 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 sind die Werte relativ zur Breite des SVG-Viewports. Hier liegen die x-Achsen-Koordinaten des Mittelpunkts des stilisierten Kreises und der Ellipse bei 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

Browser-Kompatibilität

Siehe auch

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