SVG/VML+JS实现跨浏览器的矢量图形实现方案

美琳0720

美琳0720

2016-02-20 01:00

今天图老师小编要向大家分享个SVG/VML+JS实现跨浏览器的矢量图形实现方案教程,过程简单易学,相信聪明的你一定能轻松get!

库是在webrebuild交流会上听专家将到的,后来就看了下,果然很强大通过SVG/VML+JS实现跨浏览器的矢量图形实现方案。

这其实和cufon等网络字体的实现原理是有些类似的:非IE浏览器使用SVG绘图,然后IE中使用VML。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案,包括一些动画效果。

Raphael的语法也很简单,基本上了解SVG就会很容易上手的:

var c = paper.path("M10 10L90 90");// 画一条线;
浏览器支持

IE6+、Firefox 3.0+、chrome、opera等都是很好支持的。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

一些酷酷的例子:

使用Raphael绘制的117个矢量图标:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

嗯,这些图标都是用Raphael实现的,中的图标下面就会显示代码。

简单的动画效果,虽然也可以用JS+CSS3实现,但是这个可是跨浏览器的哦。。。

感兴趣的同学可访问查看更多demo,以及

展开更多 50%)
分享

猜你喜欢

SVG/VML+JS实现跨浏览器的矢量图形实现方案

Web开发
SVG/VML+JS实现跨浏览器的矢量图形实现方案

跨浏览器实现float:center

Web开发
跨浏览器实现float:center

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

跨浏览器的 inline-block 实现[CSS]

Web开发
跨浏览器的 inline-block 实现[CSS]

如何实现Applet之间跨浏览器窗口的通信

编程语言 网络编程
如何实现Applet之间跨浏览器窗口的通信

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS中跨浏览器的inline-block实现

Web开发
CSS中跨浏览器的inline-block实现

CSS实现强制浏览器分页的实现方法

Web开发
CSS实现强制浏览器分页的实现方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

WPS2009打开数据透视表时实现自动刷新

WPS2009打开数据透视表时实现自动刷新

JavaScript学习笔记:创建对象和构造类

JavaScript学习笔记:创建对象和构造类
下拉加载更多内容 ↓