SVG绘图入门：手把手教你轻松绘制图形与动画

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG格式的图像可以无限放大而不失真，非常适合用于网页设计和开发。本文将手把手教你如何轻松绘制SVG图形与动画。

一、SVG基础

1. SVG元素

SVG图形由多种元素组成，包括：

• <svg>：定义SVG图形的根元素。
• <circle>：绘制圆形。
• <rect>：绘制矩形。
• <line>：绘制直线。
• <polyline>：绘制多边形。
• <polygon>：绘制闭合多边形。
• <ellipse>：绘制椭圆。
• <path>：绘制任意形状。

2. 属性

SVG元素具有丰富的属性，用于控制图形的样式和位置。以下是一些常用属性：

• x、y：元素中心点的坐标。
• width、height：元素的宽度和高度。
• r：圆形的半径。
• cx、cy：圆形中心点的坐标。
• rx、ry：椭圆的水平和垂直半径。
• stroke：边框颜色。
• stroke-width：边框宽度。
• fill：填充颜色。

二、绘制图形

1. 绘制圆形

以下代码绘制一个半径为50像素的圆形，边框颜色为红色，填充颜色为透明：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="red" stroke-width="2" fill="transparent"/>
</svg>

2. 绘制矩形

以下代码绘制一个宽度为100像素、高度为50像素的矩形，边框颜色为蓝色，填充颜色为绿色：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="50" stroke="blue" stroke-width="2" fill="green"/>
</svg>

3. 绘制直线

以下代码绘制一条起点为(10, 10)、终点为(100, 100)的直线，边框颜色为黑色：

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

三、动画

SVG支持多种动画效果，如渐变、平移、旋转等。以下是一个简单的动画示例，使圆形在SVG画布上移动：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="red" stroke-width="2" fill="transparent">
    <animate attributeName="cx" from="100" to="150" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

在这个例子中，圆形的cx属性在2秒内从100变为150，从而实现水平移动。

四、总结

通过本文的学习，相信你已经掌握了SVG绘图的基本技巧。SVG绘图具有强大的功能，可以应用于网页设计、数据可视化等领域。希望本文能帮助你轻松绘制图形与动画。