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图像中引用该渐变。

  • cxcy 属性定义了渐变的中心点坐标。

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

  • fxfy 属性定义了渐变焦点的坐标(可选),用于控制渐变的形状和方向。

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

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

实例

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义径向渐变 -->
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
 
  <!-- 应用径向渐变的圆形 -->
  <circle cx="100" cy="100" r="80" fill="url(#gradient)" />
</svg>

实例 1

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

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

尝试一下 »

点击查看:查看 SVG 文件

代码解析:

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

实例 2

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

下面是 SVG 代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

尝试一下 »

点击查看:查看 SVG 文件

注意事项

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

  • cxcyr 属性确定了渐变的中心和半径,而 fxfy 属性则用于控制渐变焦点,可以调整渐变的形状和方向。

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

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

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