先常规先引入Raphael库：
<script src="raphael.js" type="text/javascript"></script>
然后就很简单了，直接操作，也不用再手动写svg什么的。
1.新建画布
//x,y是画布的定位，w,h是画布的宽高 let paper = Raphael(x,y,w,h);
2.建立图形
// Raphael总共有6种图形画，其中path是万能的 let rect = paper.rect(50,50,200,100); let circle = paper.circle(400,200,50); let ellipse = paper.ellipse(750,200,100,80); let path = paper.path(‘M 250,250 L 250,250 450,400 50,400 Z‘); let img= paper.image(‘1.jpg‘,550,250,428,252); let text= paper.text(250,500,‘哈哈哈‘);
3.改变图形属性和样式
//Rapheal有两种改变属性样式的方法attr和animate //attr和jq的一样，既可以传json又可以传单个 circle.attr(‘fill‘,‘#a00‘); ellipse.attr({‘fill‘:‘blue‘,‘stroke-width‘:‘10‘}); //animate先传改变的属性样式的json，再传动画时间，再传动画插值方法 //插值方法大概有linear,easeIn,easeOut,bounce,elastic,backIn,backOut rect.animate({stroke:‘#a33‘,fill:‘green‘,‘stroke-width‘:‘20‘,‘stroke-opacity‘:‘.5‘,width:‘100‘,rx:‘20‘,rt:‘40‘},800,‘bounce‘);
4.图形绑定事件
事件大概有click、hover、mousedown、mousedown、mousemove、mouseup、touchstart、touchmove、touchend。。。。
//和jq绑定事件差不多，例如下面下这个，hover就执行第一个，buhover就执行第二个 path.hover(function(){ path.animate({path:‘M 450,250 L 450,300 450,600 80,500 Z‘,‘fill‘:‘#fc0‘},800,‘bounce‘); },function(){ path.animate({path:‘M 250,250 L 250,250 450,400 50,400 Z‘,‘fill‘:‘#0fc‘},800,‘bounce‘); })
5.变形
transform是被集成到了attr和animate里面了
img.attr({‘transform‘:‘t50,200 r30 s1.2,1‘})
img.animate({‘transform‘:‘t50,200 r30 s1.2,1‘},800,‘linear‘)
对应变换字母 translate:t———rotate:t———scale:s，变换都是不带单位的（所有svg操作都不应该带单位）,和css3的变换是一样都是自身坐标轴变换，和原生的svg不一样
