SVG辐射式渐变色

SVG辐射式或放射式渐变色 – <radialGradient>

<radialGradient>标记用来定义一个辐射式渐变色

<radialGradient>标记必须放置在<defs>标记内。<defs>标记是单词“definitions”的简写，用来容纳各种其它标记。

例 1

我们先定义一个椭圆形，然后用一个从白到蓝的辐射式渐变色渲染它：

上面的图形使用了下面的SVG代码：

<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>

代码说明：

• <radialGradient>标记的id属性定义了这个渐变色的唯一标志
• cx,cy和r属性定义了辐射的最大圆，fx和fy属性定义了辐射的焦点
• 渐变色是有两个或两个以上的颜色组成。各个颜色使用<stop>标记定义。offset定义了渐变色的起始位置和终止位置。
• fill属性里指明了需要引用的渐变色的id

例 2

下面了例子了我们调整了辐射式渐变色的参数，得到了不同的效果：

上面的图形使用了下面的SVG代码：

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="20%" r="30%" fx="70%" fy="70%">
       <stop offset="0%" style="stop-color: #ffffff; stop-opacity: 1;"></stop>
      <stop offset="100%" style="stop-color: #0000ff; stop-opacity: 1;"></stop>
      
    </radialGradient>
  </defs>
  
<ellipse cx="200" cy="70" rx="85" ry="55"  style="fill:blue;" />
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  Sorry, your browser does not support inline SVG.
</svg>