当在SVG（可缩放矢量图形）中设计线时，你可以使用<line>元素。这个元素允许你创建直线，你可以定义线的起点和终点坐标，以及线的样式。以下是一些在SVG中设计线的例子：

1. 基本的直线

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" />
</svg>

这会创建一条从坐标 (50, 50) 到 (150, 150) 的黑色直线。

2. 增加线的宽度和样式

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="2" stroke-dasharray="5,2" />
</svg>

这会创建一条蓝色、宽度为2个单位的虚线，每个短线段为5个单位，间隔为2个单位。

3. 使用渐变填充

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <line x1="50" y1="50" x2="150" y2="150" stroke="url(#gradient)" stroke-width="2" />
</svg>

这会创建一条使用线性渐变填充的线，从红色到蓝色。

4. 动画效果

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="green" stroke-width="2">
    <animate attributeName="x2" from="150" to="50" dur="2s" repeatCount="indefinite" />
  </line>
</svg>

这会创建一条绿色的线，带有一个在2秒内从x坐标150到50的动画效果，重复无限次。

这些例子展示了在SVG中设计线的一些基本技巧，你可以根据需要进行进一步的定制。SVG提供了丰富的功能，包括各种样式、渐变、动画等，以满足不同设计需求。