SVGによる放射型グラデーションの描画サンプル
放射型グラデーションの定義方法
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)ですので範囲に収まるように指定してください
