SVG 径向渐变

SVG <radialGradient> 元素

<radialGradient> 元素用于定义径向渐变。

<radialGradient> 元素必须嵌套在 <defs> 标记内；<defs>标签是定义的缩写，包含特殊元素（例如渐变）的定义。

示例

定义一个从白色到蓝色的径向渐变的椭圆：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 径向渐变</h1>
  <svg height="150" width="500">
    <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>
</body>
</html>

尝试一下

上面示例代码说明：

<radialGradient> 标记的 id 属性定义渐变的唯一名称
cx，cy 和 r 属性定义最外圆，fx 和 fy 属性定义最内圆
渐变的颜色范围可以由两种或更多种颜色组成；每种颜色都用 <stop> 标签指定；offset 属性用于定义渐变颜色的开始和结束位置
fill 属性将椭圆元素链接到渐变

用从白色到蓝色的径向渐变定义另一个椭圆：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 渐变</h1>
  <svg height="150" width="500">
    <defs>
      <radialGradient id="grad2" 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(#grad2)" />
  </svg>
</body>
</html>

尝试一下

SVG <radialGradient> 元素

示例

相关页面