SVG 径向渐变



  • SVG <radialGradient> 元素

    <radialGradient> 元素用于定义径向渐变。
    <radialGradient> 元素必须嵌套在 <defs> 标记内;<defs>标签是定义的缩写,包含特殊元素(例如渐变)的定义。
  • 示例

    定义一个从白色到蓝色的径向渐变的椭圆:
       抱歉,您的浏览器不支持嵌入式SVG。
    下面是 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。
    下面是 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>