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
/* 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 Wert | 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
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
.
<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
.
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%
.
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
- SVG
cy
Attribut - Geometrie-Eigenschaften:
cy
,cx
,r
,rx
,ry
,x
,y
,width
,height
fill
stroke
paint-order
border-radius
Kurzschreibweiseradial-gradient
<basic-shape>
Datentyp