API Reference
Still have questions?
Contact support
You are looking at an outdated 7.2.0 version of this document. Switch to the 8.4.0 version to see the up to date information.

class Improve this Doc


Base class for all vector elements.
Never invoke constructor directly!

Methods Overview

fill()Sets fill as object or string.
stroke()Sets stroke using one parameter.
strokeThickness()Gets stroke thickness.

Methods Description


Returns fill.

Returns: - Current fill (empty fill is 'none').
Sets fill as an object or a string.
Supported objects: Or a color as string. Can be combined with opacity: 'Color Opacity', 'red .5').


NameTypeDescription as object or string.

Returns: - instance for method chaining.
Fill as string.
If color is set as string, like 'red .5', it has prioruty over opt_opacity, which means if fill is set as rect.fill('red 0.3', 0.7), opacity will be 0.3.


colorstringColor as string.

Returns: - instance for method chaining.
Linear gradient fill.
Three modes are available:
  • ObjectBoundingBox with angle value preservation
  • ObjectBoundingBox without angle value preservation
  • UserSpaceOnUse


ObjectBoundingBox without angle value preservation In this mode the result angle will visually correspond the original setting, non regarding browser scaling duplication (so, for objects that do not have 1:1 proportion with the original figure, the gradient angle will correspond to the initial value due to internal calculations). ObjectBoundingBox with angle value preservation In this mode, gradient vector is calculated with the preset angle, but the result gradient angle on the rendered page can be changed if the object proportion is not 1:1 in the browser. So visually the result gradient angle may not correspond to the original settings. UserSpaceOnUse In this mode gradient settings are added by gradient size and borders/coordinates, and rendering is calculated within those borders. After that, the fill is executed on the element figure according to its coordinates. More about this mode at gradientUnits.


keysArray.<(|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | | ObjectGradient mode.
opacitynumberGradient opacity.

Returns: - instance for method chaining.
Radial gradient fill.


keysArray.<(|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient. defined then userSpaceOnUse mode else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns: - instance for method chaining.


Returns stroke.

Returns: - Returns stroke.
Set stroke using one parameter.
Available options: Note: String parts order is significant and '3px red' is not the same as 'red 3px'.


NameTypeDescription | | string | nullStroke as '[thickness ]color[ opacity]'.

Returns: - instance for method chaining.
Sets stroke settings.
Note: When stroke properties are set both by complex stroke object properties and by stroke() method params, object properties have more priority. E.g. setting shape.stroke('10 red', 5); (or shape.stroke({color: 'red', thickness: 10}, 5); will result a red stroke with thickness 10px.


NameTypeDescription | | stringStroke style, as described above.
thicknessnumberLine thickness. Defaults to 1.
dashpatternstringControls the pattern of dashes and gaps used to stroke paths. Dash array contains a list of white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke dashpattern: '5 3 2' is equivalent to dashpattern: '5 3 2 5 3 2'. join style. cap style.

Returns: - instance for method chaining.


Gets stroke thickness.


number - Thickness value.
Sets stroke thickness.


valuenumberThickness value.

Returns: - instance for method chaining.