L'attribut cy définit la coordonnée de l'axe y pour le point central d'un élément.

Trois éléments utilisent cet attribut: <circle>, <ellipse>, et <radialGradient>

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0"    stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle  cy="50"  cx="50" r="45"/>
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>

circle

Pour un élément <circle>, cy définit la coordonnée y de son centre.

Valeur <length> | <percentage>
Valeur par défaut 0
Animation Oui

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

ellipse

Pour un élément <ellipse>, cy définit la coordonnée y de son centre.

Valeur <length> | <percentage>
Valeur par défaut 0
Animation Oui

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

radialGradient

Pour un élément <radialGradient>, cy définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la limite de dégradé de 100% corresponde au périmètre de ce plus grand cercle.

Valeur <length>
Valeur par défaut 50%
Animation Oui

Exemple

<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
</svg>

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'cy' dans cette spécification.
Candidat au statut de recommandation Définition comme propriété de géométrie
Scalable Vector Graphics (SVG) 2
La définition de 'cy' dans cette spécification.
Candidat au statut de recommandation Définition pour SVG2
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'cy' dans cette spécification.
Recommendation Définition initiale pour <radialGradient>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'cy' dans cette spécification.
Recommendation Définition initiale pour <ellipse>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'cy' dans cette spécification.
Recommendation Définition initiale pour <circle>

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, teoli, Blackhole
Dernière mise à jour par : a-mt,