使用 Rapaheljs 在網頁上畫向量圖

最近工作上需要在網頁上畫向量圖
對於SVG技術不甚了解，所幸有 Raphaeljs 這個 Javascript lib，大大地縮短了開發所需的時間 Raphaeljs幫我們簡化了許多SVG所需的操作，基本上我們只需要先建立一張畫布後，就可以利用 Raphel 在畫布上製作圖形 首先，建立一個div，給予id="holder"

接著建立Raphael物件，並畫上圖形

$(document).ready(function() {
 // 建立畫布，有許多建構子可以使用，這裡使用 Raphael(id, width, height)
 var paper = Raphael('holder', 600, 600);
    
 // 畫一個長方形 rect(x, y, width, height, corner radius)
 var rect = paper.rect(10, 10, 50, 50, 5);
    
 // 畫一個橢圓形 ellipse(x, y, horizontal radius, vertical radius)
 var ellipse = paper.ellipse(50, 100, 30, 40);
    
 // 畫一個圓形 circle(x, y, radius)
 var circle = paper.circle(100, 50, 25);
    
 // 設定圖形的attributes，有許多attributes可設定，這裡只設定fill和stroke-width
 // fill: 圖形填滿的顏色, stroke-width: 圖形邊線的寬度
 rect.attr({'fill': '#0000ff', 'stroke-width': 2});  // 藍色，邊線寬度2
 ellipse.attr({'fill': '#ff0000', 'stroke-width': 5}); // 紅色，邊線寬度5
 circle.attr({'fill': '#00ff00', 'stroke-width': 10}); // 綠色，邊線寬度10
});

完成後，執行的畫面如下:

簡單的用法大概是這樣，Raphaeljs還提供了其他許多方便的API，日後再慢慢記錄在工作上使用到的功能。