从零开始学SVG：图形绘制与动画制作入门指南

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形文件格式。SVG可以描述两种类型的图形：矢量图形（比如直线和曲线）和位图图形（比如照片）。SVG图形可以轻松地进行缩放、旋转、倾斜、变形等操作，而不影响图像质量，这使得它在网页设计、游戏开发、移动应用等领域得到了广泛应用。

SVG基础

SVG文件结构

一个基本的SVG文件包含以下几个部分：

• XML声明：声明文档为XML格式。
• SVG命名空间：指定文档使用SVG命名空间。
• 根元素：通常为<svg>，包含所有SVG元素。

基本元素

SVG的基本元素包括：

• <circle>：创建圆形。
• <ellipse>：创建椭圆形。
• <line>：创建直线。
• <polygon>：创建多边形。
• <polyline>：创建折线。
• <rect>：创建矩形。
• <text>：创建文本。

每个元素都可以设置属性，如位置、大小、颜色等。

图形绘制

绘制基本形状

以<circle>为例，其属性包括：

• cx：圆心的x坐标。
• cy：圆心的y坐标。
• r：圆的半径。

例如，绘制一个半径为50像素、圆心在(100, 100)的圆：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" style="fill:blue;"/>
</svg>

绘制复杂形状

通过组合基本形状，可以绘制复杂的图形。例如，绘制一个心形：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 50 Q50,150 0,100 T100,50" style="fill:red;"/>
</svg>

其中，Q和T是二次贝塞尔曲线和三次贝塞尔曲线的缩写，分别代表控制点和终点。

动画制作

SVG支持多种动画类型，如渐变、阴影、动画路径等。

渐变动画

使用<animate>元素可以实现渐变动画。以下示例演示了如何将圆形的填充颜色从蓝色渐变到红色：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" style="fill:blue;">
    <animate attributeName="fill" from="blue" to="red" dur="2s" fill="freeze" />
  </circle>
</svg>

动画路径

使用<animateMotion>元素可以实现沿指定路径的动画。以下示例演示了如何让圆形沿直线运动：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" style="fill:blue;">
    <animateMotion path="M100,100 L150,100" dur="2s" fill="freeze" />
  </circle>
</svg>

总结

SVG是一种强大的图形绘制与动画制作工具，适合网页设计和游戏开发等领域。通过本文的学习，你已初步掌握了SVG的基础知识和应用。接下来，你可以通过实际操作和深入学习，进一步提高你的SVG技能。