SVGによる線形グラデーションの描画サンプル

icon 項目のみ表示/展開表示の切り替え

線形グラデーションの定義方法

linearGradientの中でstopにより位置と色を複数指定することにより線形グラデーションが使用できます。グラデーションの方向および繰り返し等を指定することができます。
以下に記述例を示します。 
<svg width="280" height="280"  viewBox="-20 -20 140 140" xmlns="http://www.w3.org/2000/svg"> 
 <defs>
  <linearGradient id="grad2"  x1="0%" y1="0%" x2="100%" y2="0%">
    <stop id="g3" offset="0%" stop-color="#00ff00" stop-opacity="1"/>
    <stop id="g4" offset="100%" stop-color="#ffff00" stop-opacity="1"/>
  </linearGradient>
 </defs>
 <rect x="0" y="0" width="100" height="100" fill="url(#grad2)" />
</svg>
上記の例では、横方向へ緑から黄色のグラデーションを定義し、長方形を描画します。

フォームよりグラデーションの2つの色との割合を指定し実際に描画してみる

矢印がグラデーションの方向を示しています。
x1=%
y1=%
x2=%
y2=%
offset1=% stop-color1=
offset1=% stop-color2=


ソース=

(0,0) (100,0) (0,100) (100,100) 0% 100% 

        

        

        
グラデーションの繰り返し


        

          以下のソースは20ピクセル置きに緑から黄色のグラデーションを繰り返す例です。

          preadMethod="repeat"を指定しています。

          

<svg width="160" height="80"  viewBox="-20 -20 160 80" xmlns="http://www.w3.org/2000/svg"> 
 <defs>
  <linearGradient id="grad3"  x1="0" y1="20" x2="20" y2="20" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
    <stop  offset="0" stop-color="#00ff00" stop-opacity="1"/>
    <stop  offset="100" stop-color="#ffff00" stop-opacity="1"/>
  </linearGradient>
 </defs>
 <rect x="0" y="0" width="100" height="20" fill="url(#grad3)" />
</svg>

          
            
              
              
            
          
          
            (0,0)
          
          
            (100,0)
          
           
          
        

        

        
グラデーションの例


        

          
薄い金

          
          
            
              
              
              
            
          
          

          
<linearGradient id="gold1"  x1="0%" y1="100%" x2="0%" y2="0%" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
  <stop  offset="0" stop-color="#967d41" stop-opacity="1"/>
  <stop  offset="50" stop-color="#f0f0aa" stop-opacity="1"/>
  <stop  offset="100" stop-color="#967d41" stop-opacity="1"/>
</linearGradient>

          
銀色

          
          
            
              
              
              
              
            
          
          

          
<linearGradient id="s1"  x1="0%" y1="100%" x2="0%" y2="0%" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
  <stop  offset="0%" stop-color="#d2d2d2" />
  <stop  offset="25%" stop-color="#f0f0f0"/>
  <stop  offset="75%" stop-color="#aaaaaa" />
  <stop  offset="100%" stop-color="#fafafa"/>
</linearGradient>

          
HSV色空間のH(色相)

          
          
            
              
              
              
              
              
              
              
            
          
          

          
<linearGradient id="hsv1"  x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
  <stop  offset="0%" stop-color="#ff0000" />
  <stop  offset="16.7%" stop-color="#ffff00"/>
  <stop  offset="33.3%" stop-color="#00ff00"/>
  <stop  offset="50.0%" stop-color="#00ffff"/>
  <stop  offset="66.7%" stop-color="#0000ff"/>
  <stop  offset="83.3%" stop-color="#ff00ff"/>
  <stop  offset="100%" stop-color="#ff0000"/>
</linearGradient>