“SVG相关”目录存档

超级强大的SVG SMIL animation动画详解

2014年08月31日,星期日

本文详细介绍SVG SMIL animation动画。前半部分主要是效果体验,后半部分只要是参数示意。一定是目前国内最详尽讲解SVG SMIL animation动画的文章,没有之一。内容扎实,丰富的效果展示,大量的源码示意。相信一定会对您的学习有所帮助的。

阅读全文…

理解SVG viewport,viewBox,preserveAspectRatio缩放

2014年08月27日,星期三

本文内容平实,就是标题所提到的三个东西,viewport,viewBox,preserveAspectRatio, 都是学习SVG必须掌握的基础知识。一如既往,有demo,有截图,有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

SVG图标颜色文字般继承与填充

2014年07月22日,星期二

前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face那样好控制!而且还不只一位兄弟这么说。
其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face有过之而无不及……

阅读全文…

未来必热:SVG Sprites技术介绍

2014年07月10日,星期四

未来必热:SVG Sprite技术介绍
本文是本月文章的压轴篇,介绍SVG Sprite技术的。内容丰富大而全,面向各个人群,无论你是开发还是设计,还是纯正的前端,都可以在web中使用SVG Sprite技术,比CSS Sprite技术应用还要简单。可谓老少皆宜,出门旅行,必备佳肴。好了,就不调皮了,截图比较多,内容也不少,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: SVG和Canvas分别实现图片圆角效果

2014年06月30日,星期一

实现图片圆角的方法很多,图片覆盖,CSS3圆角,SVG, Canvas都可以实现,前两个大家可能都比较熟悉,这里,着重介绍后面2种技术实现。希望在某一时刻对有需要的同行能有帮助。必须的,有demo, 有截图,有源代码展示。

阅读全文…

SVG+JS path等值变化实现CSS3兴叹的图形动画

2014年06月24日,星期二

数值变化驱动的SVG图形动画

展示SVG动画的优势与潜力,介绍SVG动画实现的基本理论,Snap.svg.js进一步的实例应用展示。多多demo,多多帅气的效果,多多通俗易懂的解释。希望本文的内容能够对您的学习有所帮助。

阅读全文…

深度掌握SVG路径path的贝塞尔曲线指令

2014年06月12日,星期四

如题,本文就是讲解SVG路径path的贝塞尔曲线指令的,不过,除了技术之外,还吐槽了很多自己的思考,自己的想法,对行业对前端的一些看法与认知,希望可以引起一些共鸣或争议。当然,主要内容还是讲得很详尽的,截图,demo,源代码展示一个都少不了。希望本文的内容能够对您的学习有所帮助!

阅读全文…

纯CSS实现帅气的SVG路径描边动画效果

2014年04月8日,星期二

本文属于简单实用的基础技术科普。有丰富的gif动画演示,有demo,有截图以及必要的源代码展示,还有官方文档释义。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

Snap.svg.js实现的钓鱼知识分享及周边

2014年02月26日,星期三

这篇文章,有散文的味道,看似技术,实际上是自我反省与心理涤荡。看似介绍钓鱼的分享,实际上是SVG技术的一些简单介绍。真真假假是是非非,文学这东西,没必要过于较真。

闲暇之余看看,或许会有心灵的共鸣,或者技术的收获。

阅读全文…

Snap.svg-SVG实战学习必修课-实例与文档讲解

2014年01月19日,星期日


2013年10月23日,第3届(如果我没记错的话)HTML5全球开发者大会在旧金山举办。Adobe在此次大会上宣布了一件事情:建立了一个名叫Snap.svg的开源项目。其目的在于摒弃Flash插件,将Flash的特性带到web上。
Adobe表示,”Snap.svg是一个强大且直观的SVG动画内容操纵API,支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能”。
Adobe支持的项目,自然其产品中会有体现,例如DreamWeaver中的PhoneGap, 这里的Snap.svg应该也会集成在其Web开发工具中,例如Edge…..

阅读全文…