手把手教你使用 SVG 实现手写 (路径) 动画效果

在浏览器中，任意的二维平面图形均可以通过path路径的形式描述。然后底层api 直接静态绘制出来。但是如果想动态的绘制路径，浏览器是没有直接支持方式的。 本文就是解决这个问题， 为浏览器补全这个功能，让静态的路径能方便的动态绘制。 效果还是挺酷炫的，实现的整个开发过程就从接需求…

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

随着移动互联网的到来，各种高清屏幕移动设备的层出不穷，导致 H5 应用在移动设备 retina 屏幕下经常会遇到图标不清晰的问题。 为了解决屏幕分辨率对图标影响的问题，通常采用 CSS Sprite，Icon Font，CSS Icon 以及 SVG 以适应 @x1 屏、@2 屏、@3 屏，相对比较而言 SVG 矢量性、缩放无损等诸多优点，更应受前端设计师的青睐，可在许多公司的移动项目应用中却很鲜见，究其主因在于 SVG 开发学习成本比较高以及在绘制的性能上比 PNG 要差。此篇文章将从 SVG 快速导出到 SVG、SVG Symbol 组件化在项目中实战进行讲解，教你如何提高 SVG 开发效率减少成本。

要让一个元素按照不规则路径进行运动，最好的办法就是使用“SVG SMIL animation”，我之前有写过文章专门介绍，参见“超级强大的SVG SMIL animation动画详解”，并且除了IE浏览器以外，其他浏览器的支持情况都蛮不错的，如下截图所示：

一些好用的 SVG Path（路径）代码可视化编辑工具

canvas 是HTML5的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。 这样的问题出现在所有支持canvas的客户端上同样出现在 微信…

期间收到了掘金小编承诺的福利，杯子和T，文末会晒。 最近对3D立方体的动画有点着魔，越玩越嗨，此状态不好，需警惕，那就告诫自己，最后一篇，然后立方体相关的就此封笔。<svg>有一个特有的动画属性是CSS3无可取代的，就是<animateMotion>，路径移动动画。也曾经特意写…

web开发中，三角形的日常应用，以三角形指示箭头最为常见，其用CSS来实现非常简单，熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 而三角箭头一般而言，又分为两种，一种是视觉上没有边框的，我们叫做实心三角形；还有一种是视觉上有边框的，而三角箭头刨去边框的部分又要与…