En SVG (Scalable Vector Graphics), l'attribut fill est utilisé pour définir la couleur de remplissage d'un élément graphique, comme une forme ou un texte. Voici quelques façons d’utiliser l’attribut fill en SVG :

1. Remplissage de couleur unie :

    XML
    <rect width="100" height="100" fill="red" />
   

2. Remplissage de couleur hexadécimal :

    XML
    <circle cx="50" cy="50" r="40" fill="#00ff00" />
   

3. Remplissage de couleur RVB :

    XML
    <ellipse cx="80" cy="80" rx="40" ry="20" fill="rgb(255, 0, 255)" />
   

4. Remplissage de couleur RGBA (avec transparence) :

    XML
    <polygon points="20,10 60,10 40,40" fill="rgba(0, 0, 255, 0.5)" />
   

5. Remplissage en dégradé:

   • Gradient linéaire:

      XML
      <rect width="100" height="100">
       <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
         <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
       </linearGradient>
       <rect width="100" height="100" fill="url(#grad1)" />
     </rect>
     

   • Dégradé radial :

      XML
      <circle cx="60" cy="60" r="50">
       <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
         <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
         <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
       </radialGradient>
       <circle cx="60" cy="60" r="50" fill="url(#grad2)" />
     </circle>
     

6. Remplissage de motif :

    XML
    <rect width="100" height="100" fill="url(#pattern1)" />
   <defs>
     <pattern id="pattern1" patternUnits="userSpaceOnUse" width="20" height="20">
       <circle cx="10" cy="10" r="5" fill="blue" />
     </pattern>
   </defs>
   

Ces exemples couvrent les remplissages de couleurs, les dégradés et les motifs de base. En fonction de votre cas d'utilisation spécifique, vous pouvez choisir l'une de ces approches pour obtenir l'effet visuel souhaité dans vos graphiques SVG.