svg径向渐变 线性渐变 2

线性渐变  ：linegradient   径向渐变 ：radialgradient  

渐变使用的过程 ：先定义渐变

定义 ：<defs></defs>  使用：通过id标识符

<svg>

 定义一个渐变

颜色驻点（）stop   （例子1）

<defs>

<lineargradient id="demo1" x1="0%" y1="0%" x2="50%" y2="150%">

<stop stop-color="red" offset="0%"></stop>

<stop stop-color="green" offset="30%"></stop>

<stop stop-color="purple" offset="50%"></stop>

<stop stop-color="blue" offset="100%"></stop>

</lineargradient>

</defs>

通过id 使用上面定义好的渐变看例子

<ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#demo1)">

</svg>  

 

<svg>（例子2）

 定义一个镜像渐变:焦点问题

<defs>

<radialGradient id="demo3"  cx="50%" cy="50%" r="50%"  fx="60%" fy="60%" >

<stop stop-color="red" offset="0%"></stop>

<stop stop-color="green" offset="30%"></stop>

<stop stop-color="purple" offset="50%"></stop>

<stop stop-color="blue" offset="100%"></stop>

</radialGradient>

</defs>

通过id 使用上面定义好的渐变

<ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#demo3)">

</svg>

<svg>    （例子3）

定义一个径向渐变:颜色驻点（stop）

 

<defs>

<radialGradient id="demo2"  cx="50%" cy="50%" r="50%" >

<stop stop-color="red" offset="0%"></stop>

<stop stop-color="green" offset="30%"></stop>

<stop stop-color="purple" offset="50%"></stop>

<stop stop-color="blue" offset="100%"></stop>

</radialGradient>

</defs>

通过id 使用上面定义好的渐变

<ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#demo2)">

</svg>

 

 

在例子（2）和例子（3）中都是径向渐变 ，就是焦点的位置不同，例子2中的焦点偏于右下角，例子3中的焦点在中间