因為多邊形的基本屬性只有 points,所以透過 D3 來插入 polygon 標籤就更簡單。
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 polygon svg.append('polygon').attr('points', '310,10 30,110 120,300 320,150'); }); |
接著讓我們隨意插入幾個多邊形吧:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '50,10 20,50 80,50' }).style({ fill: 'none', stroke: '#f0f', 'stroke-width': 4 }); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '70,10 130,10 100,50 ' }).style({ fill: 'none', stroke: '#520', 'stroke-width': 4 }); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '150,10 120,50 180,50' }).style({ fill: 'none', stroke: '#f0f', 'stroke-width': 4 }); }); |
polygon 標籤的屬性及說明可以參考:SVG 基本圖形 - 多邊形 polygon