#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# SVGDrawing Class

Defined in: `graphics/js/SVGDrawing.js:19`
Module: graphics

SVG implementation of the `Drawing` class. `SVGDrawing` is not intended to be used directly. Instead, use the `Drawing` class. If the browser has SVG capabilities, the `Drawing` class will point to the `SVGDrawing` class.

- Index
- Methods
- Properties

## Item Index

### Methods

- _closePath
- _curveTo
- _getCurrentArray
- _lineTo
- _moveTo
- _quadraticCurveTo
- _round
- _setCurveBoundingBox
- _trackSize
- clear
- closePath
- curveTo
- drawCircle
- drawDiamond
- drawEllipse
- drawRect
- drawRoundRect
- drawWedge
- end
- getBezierData
- lineTo
- moveTo
- quadraticCurveTo
- quadraticCurveTo
- relativeCurveTo
- relativeLineTo
- relativeMoveTo

### Properties

- _currentX
- _currentY
- _pathSymbolToMethod
- _type

## Methods

### `_closePath`

() private

Defined in `graphics/js/SVGDrawing.js:684`

Draws the path.

### `_curveTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/SVGDrawing.js:124`

Implements curveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_getCurrentArray`

() private

Defined in `graphics/js/SVGDrawing.js:789`

Returns the current array of drawing commands.

#### Returns:

Array

### `_lineTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/SVGDrawing.js:531`

Implements lineTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_moveTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/SVGDrawing.js:621`

Implements moveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_quadraticCurveTo`

(

- `args`
- `relative`

)
private

Defined in `graphics/js/SVGDrawing.js:223`

Implements quadraticCurveTo methods.

#### Parameters:

- `args` Array

  The arguments to be used.

- `relative` Boolean

  Indicates whether or not to use relative coordinates.

### `_round`

(

- `val`

)
private

Defined in `graphics/js/SVGDrawing.js:30`

Rounds a value to the nearest hundredth.

#### Parameters:

- `val` Number

  Value to be rounded.

#### Returns:

Number

### `_setCurveBoundingBox`

(

- `Array`
- `Number`
- `Number`

)
private

Defined in `graphics/js/SVGDrawing.js:835`

Calculates the bounding box for a curve

#### Parameters:

- `Array` Object

  pts Array containing points for start, end and control points of a curve.

- `Number` Object

  w Width used to calculate the number of points to describe the curve.

- `Number` Object

  h Height used to calculate the number of points to describe the curve.

### `_trackSize`

(

- `w`
- `h`

)
private

Defined in `graphics/js/SVGDrawing.js:870`

Updates the size of the graphics object

#### Parameters:

- `w` Number

  width

- `h` Number

  height

### `clear`

() chainable

Defined in `graphics/js/SVGDrawing.js:662`

Clears the path.

### `closePath`

() chainable

Defined in `graphics/js/SVGDrawing.js:777`

Ends a fill and stroke

### `curveTo`

(

- `cp1x`
- `cp1y`
- `cp2x`
- `cp2y`
- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:90`

Draws a bezier curve.

#### Parameters:

- `cp1x` Number

  x-coordinate for the first control point.

- `cp1y` Number

  y-coordinate for the first control point.

- `cp2x` Number

  x-coordinate for the second control point.

- `cp2y` Number

  y-coordinate for the second control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `drawCircle`

(

- `x`
- `y`
- `r`

)
protected chainable

Defined in `graphics/js/SVGDrawing.js:332`

Draws a circle.

#### Parameters:

- `x` Number

  y-coordinate

- `y` Number

  x-coordinate

- `r` Number

  radius

### `drawDiamond`

(

- `x`
- `y`
- `width`
- `height`

)
protected chainable

Defined in `graphics/js/SVGDrawing.js:382`

Draws a diamond.

#### Parameters:

- `x` Number

  y-coordinate

- `y` Number

  x-coordinate

- `width` Number

  width

- `height` Number

  height

### `drawEllipse`

(

- `x`
- `y`
- `w`
- `h`

)
protected chainable

Defined in `graphics/js/SVGDrawing.js:356`

Draws an ellipse.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

### `drawRect`

(

- `x`
- `y`
- `w`
- `h`

)
chainable

Defined in `graphics/js/SVGDrawing.js:288`

Draws a rectangle.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

### `drawRoundRect`

(

- `x`
- `y`
- `w`
- `h`
- `ew`
- `eh`

)
chainable

Defined in `graphics/js/SVGDrawing.js:307`

Draws a rectangle with rounded corners.

#### Parameters:

- `x` Number

  x-coordinate

- `y` Number

  y-coordinate

- `w` Number

  width

- `h` Number

  height

- `ew` Number

  width of the ellipse used to draw the rounded corners

- `eh` Number

  height of the ellipse used to draw the rounded corners

### `drawWedge`

(

- `x`
- `y`
- `startAngle`
- `arc`
- `radius`
- `yRadius`

)
private chainable

Defined in `graphics/js/SVGDrawing.js:405`

Draws a wedge.

#### Parameters:

- `x` Number

  x-coordinate of the wedge's center point

- `y` Number

  y-coordinate of the wedge's center point

- `startAngle` Number

  starting angle in degrees

- `arc` Number

  sweep of the wedge. Negative values draw clockwise.

- `radius` Number

  radius of wedge. If [optional] yRadius is defined, then radius is the x radius.

- `yRadius` Number

  [optional] y radius for wedge.

### `end`

() chainable

Defined in `graphics/js/SVGDrawing.js:650`

Completes a drawing operation.

### `getBezierData`

(

- `Array`
- `Number`

)
private

Defined in `graphics/js/SVGDrawing.js:807`

Returns the points on a curve

#### Parameters:

- `Array` Object

  points Array containing the begin, end and control points of a curve.

- `Number` Object

  t The value for incrementing the next set of points.

#### Returns:

Array

### `lineTo`

(

- `point1`
- `point2`

)
chainable

Defined in `graphics/js/SVGDrawing.js:503`

Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.

#### Parameters:

- `point1` Number

  x-coordinate for the end point.

- `point2` Number

  y-coordinate for the end point.

### `moveTo`

(

- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:593`

Moves the current drawing position to specified x and y coordinates.

#### Parameters:

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `quadraticCurveTo`

(

- `cpx`
- `cpy`
- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:193`

Draws a quadratic bezier curve.

#### Parameters:

- `cpx` Number

  x-coordinate for the control point.

- `cpy` Number

  y-coordinate for the control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `quadraticCurveTo`

(

- `cpx`
- `cpy`
- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:208`

Draws a quadratic bezier curve relative to the current position.

#### Parameters:

- `cpx` Number

  x-coordinate for the control point.

- `cpy` Number

  y-coordinate for the control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `relativeCurveTo`

(

- `cp1x`
- `cp1y`
- `cp2x`
- `cp2y`
- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:107`

Draws a bezier curve relative to the current coordinates.

#### Parameters:

- `cp1x` Number

  x-coordinate for the first control point.

- `cp1y` Number

  y-coordinate for the first control point.

- `cp2x` Number

  x-coordinate for the second control point.

- `cp2y` Number

  y-coordinate for the second control point.

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

### `relativeLineTo`

(

- `point1`
- `point2`

)
chainable

Defined in `graphics/js/SVGDrawing.js:517`

Draws a line segment using the current line style from the current drawing position to the relative x and y coordinates.

#### Parameters:

- `point1` Number

  x-coordinate for the end point.

- `point2` Number

  y-coordinate for the end point.

### `relativeMoveTo`

(

- `x`
- `y`

)
chainable

Defined in `graphics/js/SVGDrawing.js:607`

Moves the current drawing position relative to specified x and y coordinates.

#### Parameters:

- `x` Number

  x-coordinate for the end point.

- `y` Number

  y-coordinate for the end point.

## Properties

### `_currentX`

Number private

Defined in `graphics/js/SVGDrawing.js:62`

Current x position of the drawing.

### `_currentY`

Number private

Defined in `graphics/js/SVGDrawing.js:71`

Current y position of the drqwing.

### `_pathSymbolToMethod`

Object private

Defined in `graphics/js/SVGDrawing.js:42`

Maps path to methods

### `_type`

String private

Defined in `graphics/js/SVGDrawing.js:80`

Indicates the type of shape