cy
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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 nicht für <radialGradient> oder andere SVG-Elemente, noch 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 das vertikale Zentrum 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>-
Prozentsätze beziehen sich auf die Höhe des aktuellen SVG-Viewports.
Formale 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 |
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 jeweils 50 und 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 ihr auch ein 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;
}
Das Zentrum des gestylten Kreises befindet sich 30px vom oberen Rand des SVG-Viewports entfernt, und die gestylte Ellipse ist 100px von diesem Rand entfernt, wie in den CSS cy-Eigenschaftswerten definiert. Die ungestylten Formen sind beide 50px vom oberen Rand 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%.
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 Zentrums des Kreises und der Ellipse 30% und 50% der Höhe des aktuellen SVG-Viewports, jeweils. Da die Höhe des Bildes standardmäßig 150px betrug, bedeutet dies, dass der cy-Wert 45px und 120px entspricht.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # CY |
Browser-Kompatibilität
Loading…
Siehe auch
- SVG
cyAttribut - Geometrie-Eigenschaften:
cy,cx,r,rx,ry,x,y,width,height fillstrokepaint-orderborder-radiusKurzform-Eigenschaftradial-gradient<basic-shape>Datentyp