← 返回 SVG 模块

SVG 基础形状

SVG 提供了多种基本图形元素，每种都有特定的属性来控制其外观。

圆形 (circle)

<circle cx="100" cy="100" r="60" fill="#10b981" stroke="#059669" stroke-width="3"/>

矩形 (rect)

<rect x="50" y="50" width="100" height="100" rx="10" fill="#10b981"/>

椭圆 (ellipse)

<ellipse cx="100" cy="100" rx="80" ry="50" fill="#10b981"/>

直线 (line)

<line x1="30" y1="30" x2="170" y2="170" stroke="#10b981" stroke-width="5"/>

折线 (polyline)

<polyline points="30,150 60,50 100,120 140,40 170,150" fill="none" stroke="#10b981"/>

多边形 (polygon)

<polygon points="100,30 170,80 150,160 50,160 30,80" fill="#10b981"/>

💡 关键知识点

  • circle: 使用 cx, cy (圆心坐标) 和 r (半径) 定义
  • rect: 使用 x, y (左上角坐标), width, height 定义，rx/ry 控制圆角
  • ellipse: 使用 cx, cy (中心坐标), rx (水平半径), ry (垂直半径) 定义
  • line: 使用 x1, y1 (起点) 和 x2, y2 (终点) 定义
  • polyline: 使用 points 属性定义一系列连接的点（不自动闭合）
  • polygon: 使用 points 属性定义一系列点（自动闭合形成多边形）