SVG的渐变色

渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡，两种主要渐变是线性渐变和径向渐变。

svg中的渐变

在svg中的渐变也是利用标签来实现的：
线性渐变 linearGradient 、
径向渐变 radialGradient
是利用渐变标签的ID 在需要填充的图像的标签中 使用 style=“fill:url(#orange_red)”

线性渐变

linearGradient
< linearGradient > 可用来定义 SVG 的线性渐变，主要是定义方向和颜色。
< linearGradient > 标签一般嵌套在 的内部。 （SVG的 元素用于预定义（不会显示）一个元素使其能够在SVG图像中重复使用。）
使用：

1. < linearGradient > 标签的 id 属性可为渐变定义一个唯一的名称。
2. fill:url(#orange_red) 属性把ellipse元素链接到此渐变。
3. < linearGradient > 标签的 x1、x2、y1、y2 属性可定义渐变的方向。
4. < linearGradient > 中的stop 就是渐变的颜色 一般 offset的值都是在0~1之间的 也可以使用百分比,用来定义渐变的开始和结束位置。

渐变方向

方向	参数
水平	当 y1 和 y2 相等，而 x1 和 x2 不同时
水平	当 y1 和 y2 相等，而 x1 和 x2 不同时
垂直	当 x1 和 x2 相等，而 y1 和 y2 不同时
角形	当 x1 和 x2 不同，且 y1 和 y2 不同时

<svg width="300" height="300">
     <defs>
          <linearGradient id="color1" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0" stop-color="green"/>
               <stop offset="0.5" stop-color="yellow"/>
               <stop offset="1" stop-color="red"/>
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="190" rx="80" ry="50" style="fill:url(#color1)"/>
</svg>

效果：

径向渐变

radialGradient
< radialGradient > 可用来定义 SVG 的径向渐变，主要是定义方向和颜色。

使用：

1. < radialGradient > 标签的 id 属性可为渐变定义一个唯一的名称。
2. fill:url(#orange_red) 属性把ellipse元素链接到此渐变。
3. < radialGradient > cx、cy 和 r 属性定义外圈，而 fx和fy 定义内圈
4. < radialGradient > 中的stop 就是渐变的颜色 一般 offset的值都是在0~1之间的 也可以使用百分比,用来定义渐变的开始和结束位置。

渐变方向
cx、cy 和 r 属性定义外圈，而 fx和fy 定义内圈（可认为是往哪聚焦） 。

名称	描述	默认值
cx	渐变的中心点x位置	50％
cy	渐变的中心点y位置	50％
r	渐变的半径	50％
fx	渐变的焦点	0％
fy	渐变的焦点	0％

	<svg width="300" height="300">
     	<defs>
          	<radialGradient id="color2" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
               <stop offset="0" stop-color="green"/>
               <stop offset="0.5" stop-color="yellow"/>
               <stop offset="1" stop-color="red"/>
     		</radialGradient>
      	</defs>
     	<ellipse cx="200" cy="190" rx="80" ry="50" style="fill:url(#color2)"/>
	</svg>