学SVG看这篇就够了

现在，web页面中动画的实现方式有很多，例如原生的CSS3动画、JavaScript动画...等多种方法实现，甚至是直接使用animate、anime、magic等这些开源的类库来实现。

SVG可以自定义引入图像文件（JPGE、PNG），也可以使用JavaScript进行操作SVG。让我们的SVG更加丰富。

SVG过滤器在应用过滤效果的时候需要一个输入源。这个输入源可以是一个图形，或图形的alpha通道，或另一个过滤器的输出值。 SVG过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可

SVG支持多种遮罩效果，使用这些特性，你可以在你的项目中生产出很多很酷炫的效果。分为剪切路径和遮罩,让我们一起来看看吧

在学习完SVG图形的基本绘制之后，和CSS一样，`SVG`的图形中也可以进行图形的移动、旋转、缩放等转换操作。

在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。

在SVG中，图形对象一般使用fill、stroke进行填充。SVG可以自定义一个图形作为填充的背景，这个图形可以是一个SVG元素，也可以是位图图像，我们来看看如何使用

在SVG中，并非只能填充图形颜色和添加描边，你也可以像CSS一样，给绘制的图形应用添加渐变色。分为线性渐变、径向渐变，具体如何应用渐变色我们进行看下去！

上一篇文章我们学习了如何使用SVG中最强大的path路径进行图形绘制，在之前的一些例子中我们在绘制图形时使用了一些属性，例如stroke、fill，今天本篇将详细讲讲这些属性是怎么使用的

在上一篇文章中的两个例子，我们的命令都是使用大写字母的方式来绘制我们的图形的，其实也可以使用小写字母的方式来绘画。但，小写字母是相对命令，它们的参数不是指定一个明确的目标

在我们教程中，我们已经学习了SVG的一些基础知识，了解SVG在页面中的定位，viewBox属性的使用场景还有它的兄弟preserveAspectRatio属性，有了这些基础知识之后，我

在`SVG`元素使用的是坐标系统（网络系统），和`Canvas`类似。以页面的左上角为起标点，以`px`为单位，x轴的正方形是向右边的，而y轴正方向是向下边。

SVG诞生于1999年，是一种XML语言，类似XHTML，即SVG，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合