这篇文章发布于 2014年08月31日，星期日，03:07，归类于 SVG相关。 阅读 229307 次, 今日 82 次 71 条评论 更新于2017-02-24 拒有些资料显示，Chrome 45 & Opera 32版本之后 SMIL会在控制台console会有警告（虽然…

为加入购物车动画提供一种法案

兼容性也不是什么大问题. 当然, 如果你的网站还是需要兼容这些旧式的浏览器, 社区上也有对应的方案, 比如张鑫旭的一些SVG向下兼容优雅降级技术 如果每个svg要前端画, 对前端要求较高. 直接把代码复制到项目css中, 定制你的标签样式, 参考阿里官方的文章, 使用起来简单粗…

SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。 1. 做路径动画 利用animateMotion结合path做的动画，具体说明可见上文。 2. 实现不规则形状的点击…

SVG 小技巧：CSS filter:drop-shadow 妙用

An in-depth SVG tutorial

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

说到性能优化，常见的一种方式就是压缩图片，通常图片最多压缩到原文件的 50%。而且如果一个图标有 7 种颜色呢？那么设计就得给出 7 种颜色的图片，前端代码也得引用不同的 7 个路径。。。想想都觉得复杂。 SVG 图完美地解决了这一痛点，大小仅为原文件 10% 左右。还可以通过…