SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。它允许你创建可无限缩放的矢量图形，这使得SVG在网页设计、动画制作和图形编辑等领域有着广泛的应用。本文将带你入门SVG绘图，从基础教程学起，逐步打造你的视觉创意世界。
一、SVG基础概念
1.1 SVG元素
SVG图形由一系列元素组成，如<circle>、<rect>、<line>、<polyline>、<polygon>、<ellipse>、<path>等。这些元素定义了图形的形状、颜色、线条样式等属性。
1.2 坐标系
SVG图形在二维坐标系中绘制，其中x轴和y轴分别表示水平方向和垂直方向。默认情况下，SVG的坐标系原点位于左上角。
1.3 属性
SVG元素具有丰富的属性，如width、height、fill、stroke、stroke-width等，用于设置图形的大小、颜色、线条样式等。
二、SVG绘图基础教程
2.1 创建SVG画布
在HTML中，你可以使用<svg>标签创建SVG画布。以下是一个简单的SVG画布示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 图形元素将放置在这里 -->
</svg>
2.2 绘制基本形状
2.2.1 绘制圆形
使用<circle>元素可以绘制圆形。以下是一个绘制半径为50、中心坐标为(100, 100)、填充颜色为红色的圆形示例：
<circle cx="100" cy="100" r="50" fill="red" />
2.2.2 绘制矩形
使用<rect>元素可以绘制矩形。以下是一个绘制宽度为100、高度为50、左上角坐标为(50, 50)、填充颜色为蓝色的矩形示例：
<rect x="50" y="50" width="100" height="50" fill="blue" />
2.2.3 绘制线条
使用<line>元素可以绘制线条。以下是一个绘制起点坐标为(50, 50)、终点坐标为(150, 150)、线条颜色为绿色的线条示例：
<line x1="50" y1="50" x2="150" y2="150" stroke="green" />
2.2.4 绘制折线
使用<polyline>元素可以绘制折线。以下是一个绘制起点坐标为(50, 50)、终点坐标为(100, 100)、再连接到(150, 150)的折线示例：
<polyline points="50,50 100,100 150,150" stroke="red" />
2.2.5 绘制多边形
使用<polygon>元素可以绘制多边形。以下是一个绘制顶点坐标为(50, 50)、(100, 100)、(150, 50)的多边形示例：
<polygon points="50,50 100,100 150,50" fill="purple" />
2.2.6 绘制椭圆
使用<ellipse>元素可以绘制椭圆。以下是一个绘制中心坐标为(100, 100)、长轴为100、短轴为50、填充颜色为橙色的椭圆示例：
<ellipse cx="100" cy="100" rx="50" ry="25" fill="orange" />
2.2.7 绘制路径
使用<path>元素可以绘制复杂的路径。以下是一个绘制一个心形路径的示例：
<path d="M100,100 Q100,150 150,100 T200,100" fill="pink" />
三、SVG进阶技巧
3.1 动画
SVG支持多种动画效果，如<animate>、<animateTransform>等。以下是一个使用<animate>元素实现圆形放大动画的示例：
<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="r" from="50" to="100" dur="2s" fill="freeze" />
</circle>
3.2 交互
SVG支持事件处理，如onclick、onmouseover等。以下是一个点击圆形时改变其颜色的示例：
<circle cx="100" cy="100" r="50" fill="red" onclick="this.setAttribute('fill', 'blue')" />
四、总结
SVG绘图具有丰富的功能和灵活性，通过学习本文的基础教程，相信你已经对SVG有了初步的了解。在接下来的学习中，你可以尝试使用SVG创作更多有趣的图形和动画，打造属于你的视觉创意世界。