cy
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 :
Exemple
<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 :
La coordonnée y du centre de l'élément <circle> peut aussi être définie avec la propriété de géométrie cy. Si elle est définie en CSS, la valeur de la propriété cy l'emporte sur la valeur de l'attribut cy.
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 la propriété de géométrie cy. Si elle est définie en CSS, la valeur de la propriété cy l'emporte sur la valeur de l'attribut cy.
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
<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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |