SVG sätepeittaus

SVG 径向渐变 -

元素用于定义径向渐变(放射渐变)。

元素必须嵌套在 标记内。 元素是定义(definitions)的缩写,包含对特殊元素(比如滤镜)的定义。

例子 1

定义一个椭圆,它有从白色到蓝色的径向渐变:

这是 SVG 代码:


  
    
      
      
    
  
  
</svg>

Kokeile itse

代码解释:

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

例子 2

定义另一个椭圆,它有从白色到蓝色的径向渐变:

这是 SVG 代码:


  
    
      
      
    
  
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Kokeile itse