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 2015.
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 |