Trong SVG (Đồ họa vectơ có thể mở rộng), thuộc tính fill được sử dụng để xác định màu tô của thành phần đồ họa, chẳng hạn như hình dạng hoặc văn bản. Dưới đây là một số cách bạn có thể sử dụng thuộc tính fill trong SVG:

1. Tô màu đồng nhất:

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

2. Tô màu thập lục phân:

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

3. Tô màu RGB:

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

4. Màu tô RGBA (có độ trong suốt):

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

5. Gradient điền:

   • Độ dốc tuyến tính:

      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ốc xuyên tâm:

      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. Điền mẫu:

    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>
   

Những ví dụ này bao gồm các màu nền, độ chuyển màu và mẫu cơ bản. Tùy thuộc vào trường hợp sử dụng cụ thể của bạn, bạn có thể chọn một trong các phương pháp này để đạt được hiệu ứng hình ảnh mong muốn trong đồ họa SVG của mình.