SVG 渐变- 放射性

SVG 中的 <radialGradient> 元素用于创建径向渐变，它可以从一个中心点向外扩散形成渐变效果，使图形呈现出环形、放射状等丰富的颜色变化。

径向渐变可以应用于填充或描边 SVG 图形元素，为其添加立体感和视觉效果。

基本语法

<radialGradient id="gradient_id" cx="cx" cy="cy" r="r" fx="fx" fy="fy">
  <stop offset="offset1" stop-color="color1" />
  <stop offset="offset2" stop-color="color2" />
  <!-- 更多的 <stop> 元素 -->
</radialGradient>

参数说明：

• id 属性定义了径向渐变的唯一标识符，用于在SVG图像中引用该渐变。

• cx 和 cy 属性定义了渐变的中心点坐标。

• r 属性定义了渐变的半径。

• fx 和 fy 属性定义了渐变焦点的坐标（可选），用于控制渐变的形状和方向。

• <stop> 元素用于指定渐变中的颜色和颜色的位置。

以下代码定义了一个从红色到蓝色的径向渐变，然后将其应用于一个填充的圆形，使圆形呈现出渐变的填充效果。

实例 1

定义一个放射性渐变从白色到蓝色椭圆：

下面是SVG代码：

点击查看：查看 SVG 文件。

代码解析：

• <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
• CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
• 填充属性把ellipse元素链接到此渐变

实例 2

定义放射性渐变从白色到蓝色的另一个椭圆：

下面是 SVG 代码：

点击查看：查看 SVG 文件。

注意事项

• 渐变中可以包含多个 <stop> 元素，每个 <stop> 元素表示渐变中的一个颜色和位置。

• cx、cy 和 r 属性确定了渐变的中心和半径，而 fx 和 fy 属性则用于控制渐变焦点，可以调整渐变的形状和方向。

• 渐变的坐标值可以使用百分比或具体的长度值，百分比值相对于图形元素的大小。

• 可以将径向渐变应用于填充或描边 SVG 图形元素。

通过使用 <radialGradient> 元素，你可以创建丰富多彩的径向渐变效果，为SVG图形元素添加立体感和视觉吸引力。