<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 创建一个矩形并应用线性渐变 -->
<rect width="150" height="150" fill="url(#linearGradient)" />
<!-- 定义线性渐变 -->
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3498db; stop-opacity:1" />
<stop offset="100%" style="stop-color:#e74c3c; stop-opacity:1" />
</linearGradient>
</svg>
在上面的示例中，我们创建了一个矩形，并通过fill属性使用了名为"linearGradient"的线性渐变。线性渐变通过<linearGradient>元素定义，其中id属性为渐变定义一个唯一的标识符，而x1, y1, x2, y2属性则确定了渐变的方向。
在<linearGradient>元素内部，我们使用了两个<stop>元素定义了渐变的起始颜色和结束颜色，通过offset属性来确定颜色的位置。在这个例子中，起始颜色是蓝色(#3498db)，结束颜色是红色(#e74c3c)。
你可以根据需要调整矩形的大小、渐变的方向以及颜色的位置和数量来满足你的设计需求。
转载请注明出处：http://www.pingtaimeng.com/article/detail/14680/SVG