Svg Linear Gradient

使用 svg 里的 gradient 可以轻松为图形设置渐变色、逐渐变化的透明度。

简单来说，在<defs>是先定义一个linear gradient，设置几个stop，就是起止点，定义他们相应的颜色、透明度等其他属性。其他图形应用这个lineargradient 就可以了。

看个例子：

<defs>

<linearGradient id="id1" x1="0%" y1="0%" x2="100%" y2="0%">

<stop stop-color="#ff4b37" stop-opacity="0.4"></stop>

<stop offset="100%" stop-color="#ff4b37" stop-opacity="1"></stop>

</linearGradient>

</defs>

<rect x="0" width="25" height="10" style="fill: url(“#id1”);"></rect>

如果x1和x2相同，y1和y2不同，就是垂直改变。

如果x1和x2不同，y1和y2相同，就是水平改变。

如果x1和x2不同，y1和y2也不同，就是角度改变。

stop中的offset是相对位置，stop-color和stop-opacity是点的颜色和透明度。

W3Schools reference link http://www.w3schools.com/svg/svg_grad_linear.asp