SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计、动画制作等领域。本教程将从零开始，带你轻松掌握SVG绘图入门技巧。
一、SVG基本概念
1.1 SVG元素
SVG图形由各种元素组成，如<circle>、<rect>、<line>、<polyline>、<polygon>、<ellipse>等。这些元素可以组合成复杂的图形。
1.2 属性
SVG元素具有丰富的属性，如x、y、width、height、r（半径）等。通过设置这些属性，可以控制图形的位置、大小、颜色等。
1.3 坐标系
SVG使用笛卡尔坐标系，其中x轴表示水平方向，y轴表示垂直方向。坐标原点位于SVG画布的左上角。
二、SVG绘图入门
2.1 创建SVG画布
首先，我们需要创建一个SVG画布。可以使用以下代码创建一个宽度和高度为300像素的SVG画布：
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- 图形元素将放在这里 -->
</svg>
2.2 绘制基本图形
2.2.1 绘制圆形
使用<circle>元素可以绘制圆形。以下代码绘制了一个半径为50像素、中心坐标为(75, 75)、蓝色填充的圆形：
<circle cx="75" cy="75" r="50" fill="blue" />
2.2.2 绘制矩形
使用<rect>元素可以绘制矩形。以下代码绘制了一个宽度和高度为100像素、中心坐标为(150, 150)、红色填充的矩形：
<rect x="50" y="50" width="100" height="100" fill="red" />
2.2.3 绘制线条
使用<line>元素可以绘制线条。以下代码绘制了一条从(0, 0)到(200, 200)的蓝色线条：
<line x1="0" y1="0" x2="200" y2="200" stroke="blue" stroke-width="2" />
2.2.4 绘制折线
使用<polyline>元素可以绘制折线。以下代码绘制了一条从(0, 0)、(100, 0)、(100, 100)到(0, 100)的绿色折线：
<polyline points="0,0 100,0 100,100 0,100" fill="none" stroke="green" stroke-width="2" />
2.2.5 绘制多边形
使用<polygon>元素可以绘制多边形。以下代码绘制了一个边长为50像素、中心坐标为(150, 150)、紫色填充的正方形：
<polygon points="100,100 150,100 150,150 100,150" fill="purple" />
2.2.6 绘制椭圆
使用<ellipse>元素可以绘制椭圆。以下代码绘制了一个中心坐标为(200, 200)、横轴半径为50像素、纵轴半径为30像素的橙色椭圆：
<ellipse cx="200" cy="200" rx="50" ry="30" fill="orange" />
三、SVG高级技巧
3.1 动画
SVG支持动画效果，可以使用<animate>元素实现。以下代码演示了如何使一个圆形在画布中移动：
<circle cx="50" cy="50" r="30" fill="blue">
<animate attributeName="cx" from="50" to="250" dur="2s" repeatCount="indefinite" />
</circle>
3.2 文本
使用<text>元素可以添加文本。以下代码在画布中心添加了“SVG绘图”文本：
<text x="150" y="150" font-size="24" fill="black" text-anchor="middle">SVG绘图</text>
3.3 转换
SVG支持多种转换，如平移、缩放、旋转等。以下代码将一个矩形向右平移50像素：
<rect x="50" y="50" width="100" height="100" fill="red">
<transform>
<translate x="50" y="0" />
</transform>
</rect>
四、总结
通过本教程，你已掌握了SVG绘图的基本技巧。在实际应用中，你可以根据需要调整属性、组合元素，绘制出各种复杂的图形。希望本教程能帮助你轻松掌握SVG绘图，为你的设计之路添砖加瓦。