強大的svg操作庫——Raphael

先常規先引入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不一樣