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 cy CSS-Eigenschaft definiert den Mittelpunkt auf der y-Achse für SVG-<circle> oder <ellipse>-Elemente. Falls 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 und auch nicht für HTML-Elemente oder Pseudo-Elemente.
Syntax
/* 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 die vertikale Mitte des Kreises oder der Ellipse an.
<length>-
Als absolute oder relative Länge kann sie in jeder vom CSS-
<length>-Datentyp erlaubten Einheit angegeben werden. Negative Werte sind ungültig. <percentage>-
Prozentsätze beziehen sich auf die Höhe des aktuellen SVG-Anzeigefensters.
Formelle 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 |
Formelle Syntax
cy =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegen 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-Attributswerte sind 50 bzw. 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 stylen wir nur den ersten Kreis und die erste Ellipse, sodass ihre Zwillingsformen die Standardstile verwenden (wobei fill standardmäßig schwarz ist). Wir verwenden die cy-Eigenschaft, um den Wert des SVG-cy-Attributs zu überschreiben, und geben ihm ebenfalls eine fill- und stroke, um die ersten Formen in jedem Paar von ihren Zwillingen zu unterscheiden. Der Browser rendert SVG-Bilder standardmäßig 300px breit und 150px hoch.
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 gestylte Kreis hat seinen Mittelpunkt 30px vom oberen Rand des SVG-Anzeigefensters entfernt, und die gestylte Ellipse ist 100px von diesem Rand entfernt, wie in den CSS-cy-Eigenschaftswerten definiert. Die ungestylten Formen haben beide ihren Mittelpunkt 50px vom oberen Rand des SVG-Anzeigefensters entfernt, wie in ihren SVG-cy-Attributswerten angegeben.
y-Achsen-Koordinaten als Prozentwerte
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%.
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 betragen die y-Achsen-Koordinaten des Mittelpunkts des Kreises und der Ellipse 30% bzw. 50% der Höhe des aktuellen SVG-Anzeigefensters. Da die Höhe des Bildes standardmäßig 150px beträgt, bedeutet dies, dass die cy-Werte äquivalent zu 45px und 120px sind.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # CY |
Browser-Kompatibilität
Siehe auch
- SVG-
cy-Attribut - Geometrieeigenschaften:
cy,cx,r,rx,ry,x,y,width,height fillstrokepaint-orderborder-radius-Kurzform-Eigenschaftradial-gradient<basic-shape>-Datentyp