Raphael初窥

Raphael是一款处理SVG矢量图的JS开源库.

初始化:

var paper = Raphael(document.getElementById("notepad"), 320, 200);

var paper = Raphael("notepad", 320, 200);

绘制路径:

var path = paper.path("M143.5 268.5 L35 363 L53.5 370.5 L231.5 340 L266 278 L211 266z");

绘制图片:

var image = paper.image("map.png",0,0,300,200);

修改属性:

path.attr({"fill": "#97d6f5","stroke": "#eee","stroke-width": 1,"stroke-linejoin": "round"});

image.attr({"opacity":"0.5"});

动画:

var anim = Raphael.animation({r:40, "opacity":1, "stroke-width":0}, 2000);

var circle = paper.circle(210, 230, 1);

circle.attr({"stroke":"red", "stroke-width":3});

circle.animate(anim.delay(50).repeat(Infinity));