SVG学习笔记(3)动画、Snap.svg、Svg.js

首先,推荐看看《三看 SVG Web 动效》和《SVG+JS path等值变化实现CSS3兴叹的图形动画》,看后受益匪浅。 然后,《使用 Snap.svg 制作动画》可以帮助我们快速入门Snap.svg 另外,svg.js也是非常强大的库,但我个人不是很习惯它的方法拆分方式,需要经常链式调用多个方法来执行一个简单动作。 Read»

SVG学习笔记(2)渐变、图案、文本

渐变 填充一个渐变之前,首先要在<defs>中定义渐变的样式,再通过fill="url(#id)"来填充到具体图形中 线性渐变<linearGradient>的参数 id:唯一标识,填充时自动匹配 x1,y1:渐变起点坐标,默认以比例作单位,(0, 0)代表左上角,(1, 1 Read»

SVG 学习笔记(1)入门、基础绘图

首先,推荐先阅读MDN上的SVG教程,作为入门教程,对基础知识写得十分详细,一边看一边实验,一遍下来我觉得自己已经基本入门了。 这篇博文作为笔记,我更喜欢按自己的学习习惯来整理信息,同时补充一些图片,这样可以方便自己翻看时快速找到需要的知识点。 为什么要攻克 SVG CANVAS 其实就是一个像素画板,提供各种方式在上 Read»