cy
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.
La propriété CSS cy définit le point central sur l'axe des ordonnées d'un élément SVG <circle> ou <ellipse>. Si elle est présente, elle remplace l'attribut SVG cy de l'élément.
Note :
Bien que l'attribut SVG cy soit pris en charge par l'élément SVG <radialGradient>, la propriété cy ne s'applique qu'aux éléments <circle> et <ellipse> imbriqués dans un <svg>. Cette propriété ne s'applique ni à <radialGradient>, ni à d'autres éléments SVG, ni aux éléments HTML ou pseudo-éléments.
Syntaxe
/* Valeurs de longueur et de pourcentage */
cy: 3px;
cy: 20%;
/* Valeurs globales */
cy: inherit;
cy: initial;
cy: revert;
cy: revert-layer;
cy: unset;
Valeurs
Les valeurs <length> et <percentage> indiquent le centre vertical du cercle ou de l'ellipse.
<length>-
En tant que longueur absolue ou relative, elle peut être exprimée dans n'importe quelle unité autorisée par le type de donnée CSS
<length>. Les valeurs négatives sont invalides. <percentage>-
Les pourcentages se réfèrent à la hauteur de la zone d'affichage SVG actuelle.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | <ellipse> and <circle> elements in <svg> |
| Héritée | non |
| Pourcentages | refer to the height of the current SVG viewport |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | by computed value type |
Syntaxe formelle
cy =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir la coordonnée de l'axe y d'un cercle et d'une ellipse
Dans cet exemple, nous avons deux éléments <circle> identiques et deux éléments <ellipse> identiques dans un SVG ; leurs valeurs d'attribut cy sont respectivement 50px et 150px.
<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>
Avec CSS, nous mettons en forme uniquement le premier cercle et la première ellipse, laissant leurs jumeaux utiliser les styles par défaut (avec fill par défaut à noir). Nous utilisons la propriété cy pour remplacer la valeur de l'attribut SVG cy et ajoutons aussi un fill et stroke pour différencier les premiers éléments de chaque paire de leur jumeau. Le navigateur affiche les images SVG avec une largeur de 300px et une hauteur de 150px par défaut.
svg {
border: 1px solid;
}
circle:first-of-type {
cy: 30px;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cy: 100px;
fill: pink;
stroke: black;
}
Le centre du cercle mis en forme est à 30px du bord supérieur de la zone d'affichage SVG et l'ellipse mise en forme est à 100px de ce bord, comme défini dans les valeurs de la propriété CSS cy. Les centres des formes non stylisées sont tous deux à 50px du bord supérieur de la zone d'affichage SVG, comme défini dans leurs valeurs de l'attribut SVG cy.
Coordonnées de l'axe y en valeurs de pourcentage
Dans cet exemple, nous utilisons la même structure que dans l'exemple précédent. La seule différence est la valeur de la propriété CSS cy ; dans ce cas, nous utilisons les valeurs de pourcentage 30% et 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;
}
Dans ce cas, les coordonnées sur l'axe y du centre du cercle et de l'ellipse sont respectivement 30% et 50% de la hauteur de la zone d'affichage SVG actuelle. Comme la hauteur de l'image par défaut est de 150px, la valeur de cy équivaut donc à 45px et 120px.
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # CY |
Compatibilité des navigateurs
Voir aussi
- L'attribut SVG
cy - Les propriétés géométriques :
cy,cx,r,rx,ry,x,y,width,height - La propriété
fill - La propriété
stroke - La propriété
paint-order - La propriété raccourcie
border-radius - La fonction
radial-gradient() - Le type de données
<basic-shape>