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 Mittelpunkt auf der y-Achse von SVG-<circle>- oder <ellipse>-Elementen. Wenn vorhanden, ü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 weder für <radialGradient> noch für 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 das vertikale Zentrum des Kreises oder der Ellipse an.

<length>

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

<percentage>

Prozentsätze 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 <ellipse>-Elemente in einem SVG; ihre cy-Attributwerte sind jeweils 50 und 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 gestalten wir nur den ersten Kreis und die erste Ellipse, wobei ihre Zwillingsformen die Standardstile verwenden (wobei fill standardmäßig auf Schwarz gesetzt 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 jedes Paares von ihrem Zwilling zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig mit 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 gestalteten Kreises ist 30px vom oberen Rand des SVG-Ansichtsfensters entfernt, und die gestaltete Ellipse ist 100px von diesem Rand entfernt, wie in den CSS-cy-Eigenschaftswerten definiert. Die Mittelpunkte der ungestylten Formen sind beide 50px vom oberen Rand des SVG-Ansichtsfensters entfernt, wie in ihren SVG-cy-Attributwerten definiert.

y-Achsen-Koordinaten als Prozentsatzwerte

In diesem Beispiel verwenden wir dasselbe 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 jeweils 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 dem Äquivalent von 45px und 120px entspricht.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CY

Browser-Kompatibilität

Siehe auch