SVG.Circle = SVG.invent({ // Initialize node create: 'circle' // Inherit from , inherit: SVG.Shape // Add parent method , construct: { // Create circle element, based on ellipse circle: function(size) { return this.put(new SVG.Circle).rx(new SVG.Number(size).divide(2)).move(0, 0) } } }) SVG.extend(SVG.Circle, SVG.FX, { // Radius x value rx: function(rx) { return this.attr('r', rx) } // Alias radius x value , ry: function(ry) { return this.rx(ry) } }) SVG.Ellipse = SVG.invent({ // Initialize node create: 'ellipse' // Inherit from , inherit: SVG.Shape // Add parent method , construct: { // Create an ellipse ellipse: function(width, height) { return this.put(new SVG.Ellipse).size(width, height).move(0, 0) } } }) SVG.extend(SVG.Ellipse, SVG.Rect, SVG.FX, { // Radius x value rx: function(rx) { return this.attr('rx', rx) } // Radius y value , ry: function(ry) { return this.attr('ry', ry) } }) // Add common method SVG.extend(SVG.Circle, SVG.Ellipse, { // Move over x-axis x: function(x) { return x == null ? this.cx() - this.rx() : this.cx(x + this.rx()) } // Move over y-axis , y: function(y) { return y == null ? this.cy() - this.ry() : this.cy(y + this.ry()) } // Move by center over x-axis , cx: function(x) { return x == null ? this.attr('cx') : this.attr('cx', x) } // Move by center over y-axis , cy: function(y) { return y == null ? this.attr('cy') : this.attr('cy', y) } // Set width of element , width: function(width) { return width == null ? this.rx() * 2 : this.rx(new SVG.Number(width).divide(2)) } // Set height of element , height: function(height) { return height == null ? this.ry() * 2 : this.ry(new SVG.Number(height).divide(2)) } // Custom size function , size: function(width, height) { var p = proportionalSize(this.bbox(), width, height) return this .rx(new SVG.Number(p.width).divide(2)) .ry(new SVG.Number(p.height).divide(2)) } })