SVGによる放射型グラデーションの描画サンプル

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

放射型グラデーションの定義方法

radialGradientの中でstopにより位置と色を複数指定することにより放射型グラデーションが使用できます。グラデーションの中心および焦点を指定することができます。 以下に記述例を示します。

<svg width="200" height="200"  viewBox="-120 -120 240 240" xmlns="http://www.w3.org/2000/svg"> 
 <defs>
  <radialGradient id="grad1" gradientUnits="objectBoundingBox" spreadMethod="pad" cx="50%" cy="50%" fx="50%" fy="50%">
   <stop id="g1" stop-color="white" offset="5%" />
   <stop id="g2" stop-color="blue" offset="100%" />
  </radialGradient>
 </defs>
 <circle cx="0" cy="0" r="100"  stroke="black" fill="url(#grad1)" />
</svg> 
上記の例では、中心から外側へ白から青色のグラデーションを定義し、円を描画します。

フォームより中心座標,焦点座標及び色の入力して描画

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるように指定してください

中心x=%
中心y=%
焦点x=%
焦点y=%
グラデーション1=
グラデーション2=


ソース=

(0,0) (0,-100) (0,100) (-100,0) (100,0)