吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】グラデーション

2015年3月3日 / category : svg

グラデーションには、”線型グラデーション”と”放射型グラデーション”の2種類があります。

線型グラデーション – linearGradient

まず、構造は次のようになります。

<defs>
 <linearGradient id="gradient">
  <stop />
  ・
  ・
  ・
  <stop />
 </linearGradient>
</defs>
<rect fill="url(#gradient)"></rect>

stop要素は、グラデーションで利用される色の勾配を定義する要素となります。
それでは下記にサンプルを。

HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <linearGradient id="g0">
   <stop offset="0%" stop-color="#607db9" />
   <stop offset="100%" stop-color="#b9a760" />
  </linearGradient>
 </defs>
 <rect fill="url(#g0)" x="0" y="0" width="300" height="300" />
</svg>

stop要素には、offset属性、stop-color属性、そしてstop-opacity属性があります。
サンプルでは、offset属性、stop-color属性を使用しています。

offset属性 : グラデーションストップの位置
stop-color属性 : グラデーションストップにおいて利用される色
stop-opacity属性 : グラデーションストップにおける不透明度

linearGradient要素に属性を追加してみます。
まずは、x1属性、y1属性、x2属性、y2属性です。これらは勾配ベクトルを定義する属性です(グラデーションの始点と終点です。)

HTML – 左
<linearGradient x1="0" y1="0" x2="0" y2="1">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>
HTML – 中央
<linearGradient x1="0" y1="0.4" x2="0" y2="0.6">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>
HTML – 右
<linearGradient x1="0" y1="0" x2="1" y2="1">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>

続いて、残りの領域の塗り方を指定するspreadMethod属性についてサンプルを3つ用意しました。

HTML – 左
<linearGradient spreadMethod="pad" x1="0" y1="0" x2="0.2" y2="0.2" id="g4">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>

pad : spreadMethod属性のデフォルト値で、残りの領域は両端の色で塗りつぶされます。

HTML – 中央
<linearGradient spreadMethod="reflect" x1="0" y1="0" x2="0.2" y2="0.2" id="g5">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>

reflect : グラデーションパターンを反転しながら繰り返す。

HTML – 右
<linearGradient spreadMethod="repeat" x1="0" y1="0" x2="0.2" y2="0.2" id="g6">
 <stop offset="0%" stop-color="#607db9" />
 <stop offset="100%" stop-color="#b9a760" />
</linearGradient>

repeat : グラデーションパターンを繰り返す。

放射型グラデーション – radialGradient

構造は次のようになります。

<defs>
 <radialGradient id="gradient">
  <stop />
  ・
  ・
  ・
  <stop />
 </radialGradient>
</defs>
<rect fill="url(#gradient)"></rect>

HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <radialGradient id="g7">
   <stop offset="0%" stop-color="#607db9" />
   <stop offset="100%" stop-color="#b9a760" />
  </radialGradient>
 </defs>
<rect fill="url(#g7)" x="0" y="0" width="300" height="300" />

radialGradient要素の属性をいくつか紹介します。

グラデーションの中心位置を定義するcx属性、cy属性があります。

HTML – 左
<radialGradient cx="25%" cy="25%">
HTML – 中央
<radialGradient cx="50%" cy="50%">
HTML – 右
<radialGradient cx="75%" cy="75%">

続いて、焦点の位置を定義するfx属性、fy属性があります。

HTML – 左
<radialGradient fx="25%" fy="25%">
HTML – 中央
<radialGradient fx="50%" fy="50%">
HTML – 右
<radialGradient fx="75%" fy="75%">

最後に、グラデーションの半径を定義するr属性です。

HTML – 左
<radialGradient r="25%">
HTML – 中央
<radialGradient r="50%">
HTML – 右
<radialGradient r="75%">