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
/* 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 Wert | 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 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 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.
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.
<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>
.
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
Siehe auch
- SVG-
cx
-Attribut - Geometrieeigenschaften:
cx
,cy
,r
,rx
,ry
,x
,y
,width
,height
fill
stroke
paint-order
border-radius
Kurzform-Eigenschaftradial-gradient
<basic-shape>
Datentyp