SVG径向渐变

SVG径向渐变是SVG语言中的一种渐变方法，可以创建从一种颜色渐变到另一种颜色的效果。这种渐变方法通常是从一个点开始，向四周扩散渐变颜色。

使用方法

SVG径向渐变需要使用<radialGradient>标签进行定义，其中需要设置渐变起点和终点，以及渐变的半径等信息。

定义渐变

以下是一个基本的SVG径向渐变定义：

<svg>
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="100" height="100" fill="url(#grad1)"/>
</svg>

其中，<radialGradient>标签定义了一个名称为grad1的径向渐变，cx和cy分别表示渐变起点的x、y坐标，r表示渐变的半径大小。fx和fy一般情况下可以和cx和cy保持一致，表示焦点的坐标，可以使用略微不同的坐标来创建更多独特的渐变。

在<radialGradient>标签中，需要通过<stop>标签设置颜色变化的节点，offset属性表示当前节点的位置，style中可以设置节点的颜色、透明度等属性。

最后，在需要渐变的元素上，可以使用fill属性来填充这个渐变。

渐变效果

上面的代码将创建一个类似于下面这样的渐变效果：

渐变从渐变起点（在矩形的中心）开始，向四周扩散，由白色渐变到蓝色。

总结

SVG径向渐变是一种十分有用的渐变方法，通过调整起点、半径等属性，可以创建出各种不同的独特效果。在SVG中，渐变通常是使用<linearGradient>和<radialGradient>两个标签进行定义。除了渐变，SVG中还有很多其他有用的标签和属性，可以帮助你更好地绘制矢量图形。