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

2016-02-20 01:00 7 1 收藏

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

【 tulaoshi.com - Web开发】

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

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

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

var c = paper.path("M10 10L90 90");// 画一条线；

浏览器支持

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

一些酷酷的例子：

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

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

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

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

来源:http://www.tulaoshi.com/n/20160220/1633030.html

上一篇： WPS2009打开数据透视表时实现自动刷新
下一篇： JavaScript学习笔记:创建对象和构造类

看过《SVG/VML+JS实现跨浏览器的矢量图形实现方案》的人还看了以下文章更多>>

Illustrator创建粗略风格的矢量图形

标签： Illustrator CorelDRAW

扫描和描摹真实的手绘并扫描插图是获得粗略风格作品的最简易方法。对于这项技巧来说，AI 的实时描摹和实时上色功能很棒。步骤1 – 手绘我通常是用铅笔绘图，完成以后再用墨水为插图上色。为插图上色能产生插图间的对比。因而更容易得到好的描摹效果。步骤2 – 扫描以 300 dpi 扫描图像。当描摹插图的时候，300 dpi 的画...

关于矢量图形几个概念的说明

标签： PS PS教程

何谓矢量图像? 矢量图像，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的...

IE浏览器下如何实现无痕浏览

标签：浏览器

IE浏览器下如何实现无痕浏览使用浏览器浏览网页的时候，有时候不希望自己曾登入过的网址被保存在历史记录之中，但是又懒的去下第三方软件去清除。有没有好办法能在IE浏览器下实现无痕游览吗? 有一个方法很简单。在IE浏览器窗口中，使用键盘快捷键 Ctrl+O键，会弹出打开窗口。我们在其中输入网址内容，浏览网站后。再次打...

用JavaScript实现浏览器地震效果

一种把人吓一跳的感觉。实现方法是，把下面的JavaScript代码加入到< body与< /body之间： < script language="JavaScript" function surfto(form) { var myindex=form.select1.selectedIndex if (form.select1.options[myindex].value != null) { parent.main.location.href=form.select1.options[myindex].value; } } <...

如何安装360浏览器内的插件实现改变浏览器字体