cy

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die cy CSS Eigenschaft definiert den y-Achsen-Mittelpunkt von SVG <circle> oder <ellipse> Elementen. Ist sie vorhanden, überschreibt sie das cy Attribut des Elements.

Hinweis: Obwohl das SVG <radialGradient> Element das cy Attribut unterstützt, gilt die cy Eigenschaft nur für <circle> und <ellipse> Elemente, die in einem <svg> geschachtelt sind. Dieses Attribut gilt nicht für <radialGradient> oder andere SVG-Elemente, weder für HTML-Elemente noch für Pseudo-Elemente.

Syntax

css
/* length and percentage values */
cy: 3px;
cy: 20%;

/* Global values */
cy: inherit;
cy: initial;
cy: revert;
cy: revert-layer;
cy: unset;

Werte

Die <length> und <percentage> Werte geben den vertikalen Mittelpunkt des Kreises oder der Ellipse an.

<length>

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

<percentage>

Prozentsätze beziehen sich auf die Höhe des aktuellen SVG-Viewports.

Formale Definition

Anfangswert0
Anwendbar auf<ellipse> and <circle> elements in <svg>
VererbtNein
Prozentwerterefer to the height of the current SVG viewport
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
Animationstypby computed value type

Formale Syntax

cy = 
  <length-percentage>  

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

Beispiele

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

In diesem Beispiel haben wir zwei identische <circle> und zwei identische <ellipse> Elemente in einem SVG; ihre cy 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>

Mit CSS stylen wir nur den ersten Kreis und die erste Ellipse, so dass ihre Zwillinge die Standardstile verwenden (wobei fill standardmäßig auf Schwarz eingestellt ist). Wir verwenden die cy Eigenschaft, um den Wert des SVG cy Attributs zu überschreiben und geben ihm auch ein fill und stroke, um die ersten Formen in jedem Paar von ihren Zwillingen zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig als 300px breit und 150px hoch.

css
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 gestylten Kreises liegt 30px von der oberen Kante des SVG-Viewports und die gestylte Ellipse 100px von dieser Kante entfernt, wie in den CSS cy Eigenschaftswerten definiert. Die Mittelpunkte der ungestylten Formen liegen beide 50px von der oberen Kante des SVG-Viewports entfernt, wie in ihren SVG cy Attributwerten definiert.

y-Achsen-Koordinaten als Prozentwerte

In diesem Beispiel verwenden wir das gleiche Markup wie im vorherigen Beispiel. Der einzige Unterschied ist der CSS cy Eigenschaftswert; in diesem Fall verwenden wir Prozentwerte von 30% und 50%.

css
svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 50%;
  fill: pink;
  stroke: black;
}

In diesem Fall sind die y-Achsen-Koordinaten des Mittelpunkts des Kreises und der Ellipse 30% bzw. 50% der Höhe des aktuellen SVG-Viewports. Da die Höhe des Bildes standardmäßig 150px beträgt, bedeutet dies, dass der cy Wert dem von 45px und 120px entspricht.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CY

Browser-Kompatibilität

Siehe auch