SVG (Scalable Vector Graphics) では、 fill属性は、図形やテキストなどのグラフィック要素の塗りつぶしの色を定義するために使用されます。 SVG でfill属性を使用する方法をいくつか示します。

1. 単色の塗りつぶし:

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

2. 16 進数の色の塗りつぶし:

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

3. RGB カラー塗りつぶし:

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

4. RGBA カラー塗りつぶし (透明あり):

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

5. グラデーション塗りつぶし:

   • 線形勾配:

      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>
     

   • 放射状グラデーション:

      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. パターン塗りつぶし:

    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>
   

これらの例では、基本的な色の塗りつぶし、グラデーション、パターンについて説明します。特定の使用例に応じて、これらのアプローチのいずれかを選択して、SVG グラフィックスで目的の視覚効果を実現できます。