cy

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

Trois éléments utilisent cet attribut :

Exemple

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">  <radialGradient cy="25%">    <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 :La coordonnée y du centre de l'élément<circle> peut aussi être définie avec lapropriété de géométriecy. Si elle est définie en CSS, la valeur de la propriétécy l'emporte sur la valeur de l'attributcy.

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 :La coordonnée y du centre de l'élément<ellipse> peut aussi être définie avec lapropriété de géométriecy. Si elle est définie en CSS, la valeur de la propriétécy l'emporte sur la valeur de l'attributcy.

radialGradient

Pour un élément<radialGradient>,cy définit la coordonnées y du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe).

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

Exemple

html,body,svg {  height: 100%;}

html

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