接著再使用 D3 插入 ellipse 標籤來畫個橢圓形吧。
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 ellipse svg.append('ellipse').attr('cx', 100).attr('cy', 60).attr('rx', 80).attr('ry', 50); }); |
接著讓我們多插入幾個橢圓形及自訂不同的樣式:
檢視原始碼 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 32 33 34 35 36 37 38 39 40 41 42 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 100, cy: 60, rx: 30, ry: 50 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 10 }); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 200, cy: 60, rx: 30, ry: 50 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 10, 'fill-opacity': .6 }); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 145, cy: 180, rx: 110, ry: 40 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 5, opacity: .6 }); }); |
ellipse 標籤的屬性及說明可以參考:SVG 基本圖形 - 橢圓形 ellipse