jquery.svg.js 是一種用于繪制 SVG 圖像的 JavaScript 庫。在web開發中，時序圖是一種常見的圖形表示形式，jquery.svg.js 也可以用來繪制時序圖。

$(document).ready(function() {
var svg = $('svg').svg({ // 創建 SVG 元素
onLoad: function(svg) { // 加載完成后執行的代碼
var x = 50, y = 50; // 定義起始位置
var rectWidth = 100, rectHeight = 50; //定義矩形的大小
// 繪制第一步
svg.rect(x, y, rectWidth, rectHeight, {fill: '#fff', stroke: '#000', strokeWidth: 2});
svg.text(x + 10, y + 30, '操作1', {fontFamily: 'Verdana', fontSize: 12, fill: '#000'});
// 繪制第二步
x += rectWidth + 50;
svg.rect(x, y, rectWidth, rectHeight, {fill: '#fff', stroke: '#000', strokeWidth: 2});
svg.text(x + 10, y + 30, '操作2', {fontFamily: 'Verdana', fontSize: 12, fill: '#000'});
// 繪制第三步
x += rectWidth + 50;
svg.rect(x, y, rectWidth, rectHeight, {fill: '#fff', stroke: '#000', strokeWidth: 2});
svg.text(x + 10, y + 30, '操作3', {fontFamily: 'Verdana', fontSize: 12, fill: '#000'});
// 路線連接
x -= rectWidth + 25;
y += rectHeight + 25;
svg.polyline([[x+rectWidth,y/2-12.5],[x+rectWidth+125,y/2-12.5],
[x+rectWidth+125,y/2+12.5],[x+2*rectWidth+75,y/2+12.5]],
{fill: 'none', stroke: '#000', strokeWidth: 2});
}
});
});

上述代碼利用 jquery.svg.js 繪制了一張簡單的時序圖，首先創建 SVG 元素，然后在 onLoad 回調函數中繪制三個操作步驟的矩形和文字，最后用 polyline 連接三個矩形，形成一個簡單的時序圖。在繪制時序圖時，我們可以利用 jquery.svg.js 提供的眾多圖形繪制函數，如 circle、path、polygon 等，以及相關的樣式屬性和事件來實現圖形的定制化。通過使用 jquery.svg.js，我們可以快速、靈活地實現時序圖等圖形的繪制和效果的制作。