SVG 有哪些基本形状元素，它们各自的属性是什么

SVG 提供了多种基本形状元素，每个元素都有其特定的属性和用途：

1. 矩形（rect）

svg
<rect x="10" y="10" width="100" height="50" rx="5" ry="5" fill="blue" />

• x, y：矩形左上角坐标
• width, height：矩形宽度和高度
• rx, ry：圆角半径（水平和垂直）
• 用途：按钮、卡片、背景等

2. 圆形（circle）

svg
<circle cx="50" cy="50" r="40" fill="red" />

• cx, cy：圆心坐标
• r：半径
• 用途：点、圆形装饰、头像等

3. 椭圆（ellipse）

svg
<ellipse cx="100" cy="50" rx="50" ry="30" fill="green" />

• cx, cy：椭圆中心坐标
• rx, ry：水平和垂直半径
• 用途：椭圆装饰、眼睛形状等

4. 线条（line）

svg
<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />

• x1, y1：起点坐标
• x2, y2：终点坐标
• stroke：描边颜色
• stroke-width：描边宽度
• 用途：分隔线、连接线等

5. 折线（polyline）

svg
<polyline points="10,10 50,50 100,10 150,50" fill="none" stroke="blue" stroke-width="2" />

• points：点坐标列表（x1,y1 x2,y2 ...）
• 用途：图表、折线图等

6. 多边形（polygon）

svg
<polygon points="50,10 90,90 10,90" fill="orange" />

• points：顶点坐标列表（自动闭合）
• 用途：三角形、星形等封闭形状

7. 路径（path）

svg
<path d="M 10 10 L 100 100 L 10 100 Z" fill="purple" />

• d：路径命令（最强大的形状元素）
• 用途：复杂形状、自定义图形

通用属性：

• fill：填充颜色
• stroke：描边颜色
• stroke-width：描边宽度
• stroke-linecap：线条端点样式（butt, round, square）
• stroke-linejoin：线条连接样式（miter, round, bevel）
• opacity：透明度（0-1）
• transform：变换（旋转、缩放、平移等）

选择建议：

• 简单形状优先使用基本元素（rect, circle, ellipse）
• 复杂形状使用 path
• 需要多个点的形状使用 polyline 或 polygon
• 考虑代码可读性和维护性