<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 创建一个线性渐变 -->
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<!-- 在矩形元素上应用线性渐变 -->
<rect x="20" y="20" width="150" height="60" fill="url(#linearGradient)" />
</svg>
在这个例子中，<linearGradient> 元素定义了一个名为 "linearGradient" 的线性渐变，其中使用了两个 <stop> 元素来定义渐变的起始和结束颜色。x1, y1, x2, y2 属性表示渐变的方向，这里表示从左到右的水平渐变。
然后，矩形元素 <rect> 使用 fill 属性引用了这个线性渐变，从而在矩形上应用了从黄色到红色的线性渐变。
你可以根据需要调整 <linearGradient> 和 <stop> 元素的属性来定义不同方向和颜色的线性渐变。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12390/SVG