HTML5基础之SVG教程

什么是 SVG?

SVG全称是Scalable Vector Graphics，是一种基于XML的2D矢量图形格式。与位图不同，矢量图形可以无限缩放而不会失去清晰度，因为它们是由数学方程式描述的。SVG可使用CSS和JavaScript进行修改、交互和动画处理。它是HTML5标准的一部分，适用于在Web上呈现各种类型的图形和动画。以下是一个SVG的代码示例：

上面的代码将会在一个100x100像素的画布上绘制一个半径为40像素，坐标为(50, 50)的圆圈。

SVG的优点是什么？

相比于位图，SVG有以下优点：

• 可缩放性：SVG图像可以在任何大小的设备上无损缩放。
• 小文件大小：SVG图像通常比同等位图图像更小。
• 易于编辑：SVG图像可以使用文本编辑器进行编辑，也可以使用矢量图形软件进行编辑。
• 可搜索性：SVG图像可以包含文本，可以被搜索和访问。

以下是一个SVG的代码示例，用于绘制一个简单的图形：

上面的代码将会在一个200x200像素的画布上绘制一个50x50的矩形，填充颜色为青色。

如何在SVG中添加文本？

SVG有一些元素可以用于添加文本，其中最常用的是元素。以下是元素的一些示例：

上面的代码将会在一个200x100像素的画布上绘制三段文本，每个文本都以不同的字体大小和颜色呈现。其中x和y属性用于指定文本的位置。

如何添加动画效果到SVG中？

SVG可以通过添加动画创造出生动的效果，而这些动画是纯粹基于代码实现的。以下是一个旋转正方形的动画：

上面的代码将会在一个200x200像素的画布上绘制一个50x50的矩形，填充颜色为青色，并使其绕中心点旋转。这个动画是使用元素来实现的。以下是一些属性的解释：

• attributeType="xml"：告知SVG这个属性是XML命名空间的属性。
• attributeName="transform"：指定要设置的属性。
• type="rotate"：指定对transform属性进行旋转操作。
• from="0 100 100"：正方形从0度开始旋转。
• to="360 100 100"：正方形旋转到360度，也就是一整圈。
• dur="10s"：指定动画持续时间为10秒。
• repeatCount="indefinite"：指定动画无限重复。