SVG线段与多边形：line、polyline、polygon

发表于 2025-12-13 更新于 2026-03-12 分类于入门， SVG ，专题， SVG 阅读次数：

本篇聚焦线段与多边形相关元素：<line>、<polyline>、<polygon>，涵盖坐标、样式与典型用法。

一、直线

用途：绘制线段、分割线、坐标轴等
常用属性：
- x1：起点 x 坐标
- y1：起点 y 坐标
- x2：终点 x 坐标
- y2：终点 y 坐标
示例：

<svg width="120" height="40" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一条红色斜线 -->
  <line x1="10" y1="30" x2="110" y2="10" stroke="#E57373" stroke-width="4" />
  
</svg>

成品展示：

二、折线

用途：折线图、路径、箭头等
常用属性：
- points：点坐标列表（x1,y1 x2,y2 …）
示例：

<svg width="120" height="60" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一条紫色折线，不填充 -->
  <polyline points="10,50 40,10 70,50 100,10" fill="none" stroke="#BA68C8" stroke-width="4" />
  
</svg>

成品展示：

三、多边形

用途：多边形、星形、图标等
常用属性：
- points：点坐标列表（x1,y1 x2,y2 …），类似polyline标签，但是最后一个点会自动闭合
示例：

<svg width="120" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个橙色三角形 -->
  <polygon points="60,10 90,90 30,90" fill="#FFB74D" stroke="#F57C00" stroke-width="4" />
  
</svg>

成品展示：

小结

折线与多边形以 points 定义形状，配合描边样式可构建箭头、折线图、星形等常见图形。

0%