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>

<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>
Valeur par défaut 50%
Animation Oui

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

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'cx' 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 'cx' 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 'cx' dans cette spécification.
Recommendation Définition initiale pour <radialGradient>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'cx' dans cette spécification.
Recommendation Définition initiale pour <ellipse>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'cx' 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,