渐变方法 <linearGradient> 必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对渐变，滤镜等特殊元素效果进行定义。 
例如：

<svg width="100%" height="800">
	<defs>
		<lineargradient id="org"  x1="0%" y1="0%" x2="100%" y2="0%">
		<stop offset="0" style="stop-color: red;"></stop>
		<stop offset="100" style="stop-color: yellow;" stop-opacity:100"></stop>
		</lineargradient>
	</defs> 
	<circle cx="200" cy="200" r="50" style="fill:url(#org)" /> 
</svg>

 属性讲解:

  1. <linearGradient> 标签的 id 属性可为渐变效果定义一个唯一的名称
  2. style="fill:url(#org)" 必须通过style的方式绑定样式id
  3. x1、x2、y1、y2 属性可定义渐变的开始和结束位置 
  4.   当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
  5.   当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
  6.   当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
  7. 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。
  8. offset 属性用来定义渐变的开始和结束位置。

效果：

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源： SVG实现渐变效果 - Qui-Note