svg 使用lineargradient

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。它可以用于创建各种图形，包括线性渐变（Linear Gradient）。

线性渐变是一种在SVG中创建平滑过渡效果的方法，它可以在两个或多个颜色之间创建一个渐变。使用线性渐变，你可以定义一个起点和一个终点，然后在这两个点之间创建一个颜色过渡。

要使用线性渐变，你需要使用`<linearGradient>`元素来定义渐变的属性。以下是一个示例：

<svg width="200" height="200">
  <defs>
    <linearGradient id="myGradient" 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>
  </defs>
  <rect width="200" height="200" fill="url(#myGradient)" />
</svg>

在上面的示例中，我们首先使用`<defs>`元素定义了一个线性渐变，它的id属性设置为"myGradient"。然后，在`<linearGradient>`元素内部，我们使用`<stop>`元素定义了两个颜色停止点。每个`<stop>`元素都有一个offset属性，它表示颜色停止点在渐变中的位置。我们还可以使用style属性来定义每个颜色停止点的颜色和透明度。

最后，我们使用`<rect>`元素创建了一个矩形，并将fill属性设置为"url(#myGradient)"，这样矩形就会填充线性渐变的效果。