本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。以及，相关的动画的矩阵知识，这个也是现在 CSS 动画里面最重要，同时也是最为欠缺的知识点。文章会先从基本语法入手，然后，慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面，还附有相关语法的介绍，当你在遇到不熟悉语法的时候可以参考参考。

Web中对于Icon的使用已经是非常频繁的一件事情了，而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势，但随着技术的革新，其中SVG的图标在Web中的使用也越来越频繁，并且其具备的优势也越来越明显。正因如此，在自己的项目中使用SVG的图标的场景也越来越多，因此，今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

前两天在Codepen看到了@Kyle Wetton写的一个示例，使用CSS混合模式和SVG来改变沙发的颜色。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆的应用中，就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果？如果是，那么请继续往下阅读。

在Web中给文本添加下划线常常出现在<a>链接的文本上，早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外，CSS还有很多技术方案可以给文本添加下划线效果，比如border-bottom、box-shadow、background-image等。对于Web开发者而言，更庆幸的是，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中，将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

在SVG中，对于很多初学者或者使用SVG有一段时间的同学来说，有几个概念总是会相互混淆。比如，SVG的画布、视窗（Viewport）、ViewBox等。这几个概念对于学习或掌握SVG来说是非常必要的。在此我们一起来学习和了解这几个概念。

在《图解SVG的核心概念》一文中，花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后，对于学习和理解SVG方面的知识会变得更容易。时至今日，设计SVG的应用软件也越来越多，比如我们熟悉的Adobe Illustrator以及近几年较为流行的Sketch和Figma等。不过今天，我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话，请继续往下阅读。

在Web的世界当中，SVG并不是什么新的语言，只不过早年前SVG在Web的应用并不太广泛。不过近年来，它在Web的应用越来越广泛。最为常见的就是一些Icon图标，复杂一点是一些矢量图（比如不规则的图形），甚至还可以使用SVG的滤镜、动效等功能，实现一些复杂的UI效果。不过这些并不是今天要和大家聊的主题，今天想和大家聊的是 SVG在前端框架中的应用，比如React框架。

Icon图标在Web应用或Web页面中起着至关重要的作用。它除了起到一定装饰作用之外，还可以在不添加任何文本信息的情况之下向用户传达正确的含义。在当今的Web开发中，有许多不同的方式将图标运用于Web应用或Web页面上。同样，在社区中也有很多介绍Icon图标系统构建的方法，比如早期的雪碧图，字体图标以及SVG Sprites等。但是今天我想从不同的角度来和大家聊聊，如何基于React框架下构建属于自己的SVG图标系统。感兴趣的同学，欢迎继续往下阅读。

前段时间和大家一起探讨了在React框架体系下如何使用SVG和 构建SVG图标系统。不管是引入.svg文件当作React组件，还是通过工程能力将.svg文件转换成React组件，它们之间都有一定的共性，比如说无法修改SVG部分的外观特性等。但在SVG的内联使用中，我们是可以通过CSS的特性或调整SVG元素标签的属性，可以自定义SVG外观，甚至还可以添加动效。因此，今天想和大家探讨如何在React中使用自定义（个性化）的SVG。

变开动效他有一个专业名词，叫作 Morphing Animation，简单地说从一种图形平滑过渡到另一张图形，也就是把两个（或多个）图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁，比如说，两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯，那么今天就来和大家聊聊如何创建变形动效的效果。