svg线性渐变

svg线性渐变

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>//<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
<linearGradient id="zzj" x1="0%" y1="0%" x2="100%" y2="0%">
//<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
//x1与x2不同，y1=y2;所以是水平渐变

<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
//调数值，变颜色
//rgb(255,255,255); 包含三个数值：红255,绿255,蓝255，黑0；
//rgb(255,0,0);表示红色，从左到右渐变offset="0%"
//rgb(0,255,0);表示绿色，从左到右渐变
//rgb(255,255,0);表示黄色色，从左到右渐变
//rgb(255,255,255);表示灰色，从左到右渐变

<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
//同理，offset="100%" rgb(255,0,0); 表示从右开始渐变
</linearGradient>
</defs>

//形状：椭圆ellipse
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
//          fill:url(#zzj) 属性把 ellipse 元素链接到此渐变
//<linearGradient id="zzj">

</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
         
<defs>

<linearGradient id="gz" x1="10%" y1="10%" x2="100%" y2="100%">

<stop offset="0%" style="stop-color: white"></stop>
<stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1"/></stop>

</linearGradient>
</defs>

<rect x="20" y="20" width="500" height="300" style="fill: url(#gz)"/>

</svg>