SVG 让 UI 工程师早点回家陪媳妇
本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点。文章会先从基本语法入手,然后,慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面,还附有相关语法的介绍,当你在遇到不熟悉语法的时候可以参考参考。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
本文主要是讲解关于 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上的使用也越来越频繁,比如说,两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯,那么今天就来和大家聊聊如何创建变形动效的效果。