SVG线性渐变用于表示一种颜色到另一种颜色的线性转换。<linearGradient>元素定义线性渐变。可以使用<defs>元素中的<linearGradient>元素。
线性渐变可以是垂直，水平或角度渐变:
- 当
x1和x2不同且y1和y2相等时，会创建水平渐变。 - 垂直梯度在
y1和y2不同且x1和x2相等时创建。 - 当
y1，y2和x1，x2不同时会产生角度梯度。
示例代码
<!DOCTYPE html>
<html>
<body>
<svg height="500" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
</svg>
</body>
</html>
说明
id属性定义了渐变的唯一名称。x1，x2，y1，y2属性定义了渐变的开始和结束位置。- 渐变颜色范围可以由两种或更多种颜色组成，并且每种颜色包含标签。
offset属性定义了渐变颜色开始和结束的位置。 fill属性用于将eclipse的元素链接到渐变。
上面代码执行后，显示效果如下 -
