cy 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.
Die CSS-Eigenschaft cy definiert den Mittelpunkt auf der y-Achse eines SVG-Elements <circle> oder <ellipse>. Ist sie vorhanden, überschreibt sie das Attribut cy des Elements.
Hinweis:
Das SVG-Element <radialGradient> unterstützt zwar das Attribut cy, die Eigenschaft cy gilt jedoch nur für <circle>- und <ellipse>-Elemente innerhalb eines <svg>-Elements. Sie gilt weder für <radialGradient> oder andere SVG-Elemente noch für HTML-Elemente oder Pseudoelemente.
Syntax
/* length and percentage values */
cy: 3px;
cy: 20%;
/* Global values */
cy: inherit;
cy: initial;
cy: revert;
cy: revert-layer;
cy: unset;
Werte
Die Werte <length> und <percentage> geben die vertikale Position des Mittelpunkts des Kreises oder der Ellipse an.
<length>-
Als absolute oder relative Länge kann der Wert in jeder Einheit angegeben werden, die der CSS-Datentyp
<length>zulässt. Negative Werte sind ungültig. <percentage>-
Prozentwerte beziehen sich auf die Höhe des aktuellen SVG-Viewports.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | <ellipse> and <circle> elements in <svg> |
| Vererbt | Nein |
| Prozentwerte | refer to the height of the current SVG viewport |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
| Animationstyp | by computed value type |
Formale Syntax
cy =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Beispiele
Die y-Koordinate eines Kreises und einer Ellipse festlegen
In diesem Beispiel enthält ein SVG zwei identische <circle>-Elemente und zwei identische <ellipse>-Elemente. Die Werte ihrer cy-Attribute sind 50 beziehungsweise 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>
Mit CSS gestalten wir nur den ersten Kreis und die erste Ellipse. Die jeweils zweite Form behält die Standarddarstellung bei (fill ist dabei standardmäßig schwarz). Mit der Eigenschaft cy überschreiben wir den Wert des SVG-Attributs cy. Außerdem legen wir fill und stroke fest, um die erste Form jedes Paares von der zweiten zu unterscheiden. Browser stellen SVG-Bilder standardmäßig mit einer Breite von 300px und einer Höhe von 150px dar.
svg {
border: 1px solid;
}
circle:first-of-type {
cy: 30px;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cy: 100px;
fill: pink;
stroke: black;
}
Der Mittelpunkt des gestalteten Kreises liegt 30px vom oberen Rand des SVG-Viewports entfernt, der Mittelpunkt der gestalteten Ellipse 100px. Diese Positionen sind durch die Werte der CSS-Eigenschaft cy festgelegt. Die Mittelpunkte der nicht gestalteten Formen liegen gemäß ihren SVG-Attributen cy beide 50px vom oberen Rand des SVG-Viewports entfernt.
y-Koordinaten als Prozentwerte
In diesem Beispiel verwenden wir dasselbe Markup wie im vorherigen Beispiel. Der einzige Unterschied sind die Werte der CSS-Eigenschaft cy: Hier verwenden wir die Prozentwerte 30% und 50%.
svg {
border: 1px solid;
}
circle:first-of-type {
cy: 30%;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cy: 50%;
fill: pink;
stroke: black;
}
Die y-Koordinaten der Mittelpunkte von Kreis und Ellipse liegen hier bei 30% beziehungsweise 50% der Höhe des aktuellen SVG-Viewports. Da die Bildhöhe standardmäßig 150px beträgt, entsprechen die cy-Werte 45px beziehungsweise 75px.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # CY |
Browser-Kompatibilität
Siehe auch
- SVG-Attribut
cy - Geometrieeigenschaften:
cy,cx,r,rx,ry,x,y,width,height fillstrokepaint-order- Kurzschreibweise
border-radius radial-gradient- Datentyp
<basic-shape>