关与Raphael的理解

Raphael.js用path方法绘制图，是怎么做到的？

 <path fill="url(#48490-_0050af-_002c62)" stroke="none" d="M22.646,19.307C23.606,17.724,24.169,15.871999999999998,24.17,13.886C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885C3.204,19.674,7.897,24.366,13.688,24.366C15.675,24.366,17.527,23.803,19.11,22.843L26.238,29.97L29.773,26.433L22.646,19.307ZM13.688,20.369C10.106000000000002,20.361,7.210000000000001,17.465,7.204000000000001,13.885C7.210000000000001,10.303,10.107000000000001,7.407,13.688,7.399C17.267,7.407,20.166,10.303,20.172,13.885C20.165,17.465,17.267,20.361,13.688,20.369ZM15.687,9.051H11.687V11.884H8.854V15.885000000000002H11.687V18.718000000000004H15.687V15.884000000000004H18.519V11.885000000000003H15.685999999999998V9.051Z" transform="matrix(1,0,0,1,4,4)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" opacity="1" fill-opacity="1"></path>

软件可以导出SVG格式的，里面自动转换成路径，比如用PhotoShop做好，然后选择导出或存成SVG格式，就可以得到路径。
另外像Vector Magic这样的软件，可以将图片自动转换成矢量图，存成SVG格式的时候，也可以得到路径。

Raphael JS

关与Raphael的理解

类似画笔，需要先引入插件，

初始化画布

var width = 600;
var height = 200;
var paper = Raphael("mySvg",width,height);//mySvg为设定的盒子ID

function drawRect(x,y,w,h,radius){
    var rect = paper.rect(x,y,w,h);     //若绘圆角矩形加上圆角参数(横坐标，纵坐标，宽，高，圆角)
    rect.attr({
        "fill": "red",             //填充颜色
        "stroke": "lime",     //边框颜色
        "stroke-width": 2   // 边框宽度
    });
}

关与Raphael的应用

SVG地图绘制、复杂等图形绘制