最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG辐射式渐变色


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

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

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


例 1

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


  
    
      
      
    
  
  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的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,cyr属性定义了辐射的最大圆,fxfy属性定义了辐射的焦点
  • 渐变色是有两个或两个以上的颜色组成。各个颜色使用<stop>标记定义。offset定义了渐变色的起始位置和终止位置。
  • fill属性里指明了需要引用的渐变色的id

例 2

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


  
    
       
      
      
    
  
  


  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的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>

SVG线性渐变色


SVG渐变色

渐变色(gradient)是指从一种颜色平滑的过渡到另外一种颜色。而且,我们可以将多种渐变色应用到同一个网页元素上。

在SVG里,有两种主要的渐变色类型:

  • 线性渐变色 Linear
  • 辐射式(放射式)渐变色 Radial

SVG线性渐变色 – <linearGradient>

<linearGradient>标记就是用来定义渐变色的。

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

线性渐变色可以定义成水平渐变色,垂直渐变色和斜向渐变色:

  • y1y2相等,而x1x2不等时,就形成了水平渐变色
  • y1y2不等,而x1x2相等时,就形成了垂直渐变色
  • y1y2不等,而x1x2也不等时,就形成了斜向渐变色

例 1

我们先定义一个椭圆,而后用一个从黄色到红色的渐变色渲染它:


  
    	
      
      
    
  
  
  Sorry, your browser does not support inline SVG.

上面的图像使用了下面的SVG代码:

	<svg height="150" width="400">
 
<defs>
   
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
     
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
     
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
   
</linearGradient>
 
</defs>
 
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>

代码说明:

  • <linearGradient>标记的id属性定义了这个渐变色的唯一标志
  • <linearGradient>标记的x1, x2, y1,y2四个属性定义了渐变色的起始位置和终止位置
  • 渐变色的颜色组成可以是2个或2个以上的颜色。每种颜色都使用一个<stop>标记定义。offset属性用来定义渐变色的开始和结束位置。
  • fill属性定义了需要引用的渐变色的ID

例 2

下面的例子中的渐变色方向是垂直的:


  
    	
      
      
    
  
  
  Sorry, your browser does not support inline SVG.

上面的图像使用了下面的SVG代码:

	<svg height="150" width="400">
 
<defs>
   
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
     
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
     
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
   
</linearGradient>
 
</defs>
 
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

例 3

下面的例子里,我们使用了水平渐变色,并且还在椭圆里添加了文字:


  
    	
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

上面的图像使用了下面的SVG代码:

	<svg height="150" width="400">
 
<defs>
   
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
     
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
     
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
   
</linearGradient>
 
</defs>
 
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

代码说明:

  • <text>标记的作用是添加一段文字