cy

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 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

Initialer Wert0
Anwendbar aufellipse 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