# drawSVG

## 规则（Rules）

# SVG图形绘制规范

## 1. 命名空间必填

每个SVG必须包含xmlns属性。

✅ `<svg xmlns="http://www.w3.org/2000/svg">`
❌ `<svg>` 缺少xmlns

## 2. viewBox必填

必须包含viewBox定义，确保缩放正确。

✅ `<svg viewBox="0 0 100 100">`
❌ 没有viewBox

## 3. 标签闭合

所有标签必须正确闭合。

✅ `<circle cx="50" cy="50" r="40"/>`
❌ `<circle cx="50" cy="50" r="40">`

## 方法（Methods）

# SVG图形绘制方法

## 步骤

### 1. 分析需求
分析设计规范，确定图形尺寸、颜色和样式。

### 2. 编写SVG代码
编写SVG代码绘制图形。

### 3. 验证渲染
检查标签闭合和属性格式，确保代码正确。

### 4. 交付
在浏览器中打开确认渲染正确。

## 技巧（Tips）

# SVG图形绘制技巧

## 1. 使用CSS控制样式

在 `<style>` 中定义CSS类，避免重复写style属性。

## 2. 常见问题

| 问题 | 原因 | 解决 |
|------|------|------|
| SVG显示不全 | viewBox设置不当 | 调整viewBox范围 |
| 颜色不对 | 颜色值错误 | 检查HEX/RGB值 |
| 元素位置偏移 | 坐标计算错误 | 检查x/y/cx/cy值 |