cy

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

Hinweis: Während das SVG-<radialGradient>-Element das cy-Attribut unterstützt, gilt die cy-Eigenschaft nur für <circle>- und <ellipse>-Elemente, die in einem <svg> verschachtelt sind. Dieses Attribut gilt nicht für <radialGradient> oder andere SVG-Elemente noch für HTML-Elemente oder 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 sie in jeder Einheit ausgedrückt werden, die vom CSS <length> Datentyp erlaubt ist. Negative Werte sind ungültig.

<percentage>

Prozentwerte beziehen sich auf die Höhe des aktuellen SVG-Ansichtsfensters.

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

Bestimmen 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; deren cy-Attribut-Werte 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, sodass ihre Zwillingsformen die Standardstile verwenden (mit fill, das standardmäßig auf Schwarz gesetzt ist). Wir verwenden die cy-Eigenschaft, um den Wert des SVG-cy-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 in einer Breite von 300px und einer Höhe von 150px.

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 ist 30px vom oberen Rand des SVG-Ansichtsfensters entfernt und die gestylte Ellipse ist 100px von diesem Rand entfernt, wie in den CSS-cy-Eigenschafts-Werten definiert. Die ungestylten Formenmitten sind beide 50px vom oberen Rand des SVG-Ansichtsfensters entfernt, wie in ihren SVG-cy-Attribut-Werten definiert.

y-Achsen-Koordinaten als Prozentwerte

In diesem Beispiel verwenden wir das gleiche Markup wie im vorherigen Beispiel. Der einzige Unterschied liegt im Wert der CSS-cy-Eigenschaft; 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% und 50% der Höhe des aktuellen SVG-Ansichtsfensters. Da die Höhe des Bildes standardmäßig 150px beträgt, bedeutet dies, dass der cy-Wert 45px bzw. 120px entspricht.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CY

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch