cx
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 cx définit la coordonnée de l'axe x pour le point central d'un élément.
Trois éléments utilisent cet attribut: <circle>, <ellipse>, et <radialGradient>
Exemple
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<radialGradient cx="25%" id="myGradient">
<stop offset="0" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<circle cx="50" cy="50" r="45" />
<ellipse cx="150" cy="50" rx="45" ry="25" />
<rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
circle
Pour un élément <circle>, cx définit la coordonnée x de son centre.
| Valeur |
<length-percentage>
|
|---|---|
| Valeur par défaut | 0 |
| Animation | Oui |
Note :
À partir de SVG2, cx 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>, cx définit la coordonnées x de son centre.
| Valeur |
<length-percentage>
|
|---|---|
| Valeur par défaut | 0 |
| Animation | Oui |
Note :
À partir de SVG2, cx 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>, cx 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 du dégradé à 100% corresponde au périmètre de ce plus grand cercle.
| Valeur |
<length-percentage>
|
|---|---|
| Valeur par défaut | 50% |
| Animation | Oui |
Autre exemple
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient cx="0" id="myGradient000">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="50%" id="myGradient050">
<stop offset="0%" stop-color="gold" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
<radialGradient cx="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 # RadialGradientElementCXAttribute |