使用 SVG，实现带动画效果的圆环进度条

菠萝看到一个效果非常喜欢，当图形靠近时有一种类似于水滴融合在一起的感觉，不会像平时的图形那样生硬地互相遮挡，看了网上一些资料之后尝试着做了下面这个demo。 如果你也喜欢这个效果，可以继续看下菠萝翻译的下面这篇文章，有些地方可能会因为理解不到位有些差异，有兴趣的戳英文原文，文章…

偶然在svgTrick上看到了一个效果，模仿了一下。作者原先也是受到dribble上的一个动效启发，这个效果与svg简直是天作之合。 最后模拟的效果如下，gif有点卡顿，戳戳这里查看网页效果。 我们先看着动效分析一下，主要可以将动画分成五部分。 这个效果的完成很简单。只需要在画…

之前分享了一些自己平时整理的可以通用的SVG动画的教程基本都是最基础的变化，旋转也好，缩放也好，沿路径运动也好，只需要定义CSS3的一些动画属性值或者SVG的动画属性标签，当然，运用得当的话，依靠这些也能做出很多超炫的效果，只要想象力足够，idear胜过方法。本质上来讲，各种动…

一些你所不知道 SVG 的性能优化技巧清单

svg-progress-bar发现bug或者有什么不足望指点,感觉不错点个star吧。

我们首先需要理解一下viewBox（画布上可以显示的区域）和width/height的关系。在canvas中我们若改变宽高，那么图像是可能发生扭曲的，但是svg不会，还是会以正常比例显示。 我们先设置一个宽高和viewBox的尺寸是相同的，明显显示正常。 当我们同比例放大或缩小…

译者：如果你安装npm包过程中出现错误，请尝试更新npm自身至最新的版本之后再次安装。 在上一部分中，你使用create-react-app初始化了项目，安装并配置了redux来管理游戏的状态。在那之后，你学会了如何在React中制作SVG组件。我们做了多个组件比如天空组件、陆…

SVG 路径描边动画 (path animation) 实战应用