インライン SVG 画像へ円形のグラデーションをかけるには、radialGradient 要素を使用します。

linearGradient 要素の場合と同じく、linearGradient 要素を defs 要素で囲い定義化し、linearGradient 要素に付与した ID をグラデーションを適用したい画像要素の fill 属性へリンクします。

グラデーションを作る stop 要素も linearGradient 要素と同じく2つ以上指定し、始点と終点の位置と色を指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

radialGradient 要素でかけたグラデーションの位置を変更する

円の中心から少しずらしてグラデーションをかけたい場合は、勾配ベクトルで位置を調整します。円形のグラデーションの場合は radialGradient 要素に cx cy 属性で位置の調整。r 属性でグラデーションの大きさの調整ができます。

グラデーションの位置を左上にしたい場合は、radialGradient 要素へ cx=”0.2″ cy=”0.2″ と指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

さらに、グラデーションの範囲を広げたい場合は、r 属性に 0.5 以上の値を指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2" r="0.8">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示

グラデーションの中心、焦点の位置を変更する

radialGradient 要素に fx fy 属性を指定することで焦点をずらすことができます。それぞれ 0.5 の指定が円の中心となります。中心より左又は、上におきたい場合は、fx 値を0.5以下、右又は下に置きたい場合は 0.5 以上 1 以下の数字を指定します。

焦点を左の少し下に置きたい場合、fx=”0.3″ fy=”0.6″ と指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2" r="0.8" fx="0.3" fy="0.6">
      <stop offset="0%"   stop-color="#fff" />
      <stop offset="100%" stop-color="#666" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示