在SVG中,直线通过 <line> 元素来表示。以下是一个简单的SVG直线的例子:
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 直线 -->
  <line x1="10" y1="10" x2="190" y2="90" stroke="blue" stroke-width="2" />
</svg>

在这个例子中:

  •  使用 <svg> 元素定义了SVG图形的画布,设置了宽度(width)和高度(height)。

  •  使用 <line> 元素定义了一条直线,通过 x1 和 y1 属性设置了起点的坐标,通过 x2 和 y2 属性设置了终点的坐标。

  •  stroke 属性设置了直线的颜色为蓝色,stroke-width 属性设置了直线的宽度为2。


你可以根据需要调整直线的起点、终点、颜色和宽度。以下是一个包含调整的例子:
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 直线,调整起点、终点、颜色和宽度 -->
  <line x1="20" y1="20" x2="180" y2="80" stroke="red" stroke-width="4" />
</svg>

在这个例子中,直线的起点和终点被调整为 x1=20,y1=20 和 x2=180,y2=80,颜色为红色,宽度为4。你可以根据需要调整这些值。SVG直线是非常灵活的,可以通过调整属性来满足各种设计需求。


转载请注明出处:http://www.zyzy.cn/article/detail/14671/SVG