linearGradient

Vecta.linearGradient

new Vecta.linearGradient(grad)

Creates a new linear gradient or gets existing linear gradient.

Name Type Description

grad

string|object

A valid string id or reference url. Or, an object of necessary gradient element.

Name	Type	Attributes	Description
`angle`	object	`optional`	The angle for linear gradient
`stops`	object	`optional`	The stops for linear gradient

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad'); //pass in string id to return existing linear gradient object
var linear = new Vecta.linearGradient('url(#L001001000ffe8e6100100ff8080100.grad)'); //pass in reference url to return existing linear gradient object
var linear = new Vecta.linearGradient({
        	angle: 90,
        	stops: [{color: '#bfbfbf'},{color: '#595959'}]
    	}); //pass in object with necessary gradient element to find existing or creates new linear gradient object

Methods

.addStops(stops) Returns: Object

Add stops to linear gradient.

Name	Type	Description
`stops`	Object[]	An array of stops to add, in th form of `{offset: string, color: string, opacity: number}[]`.

Returns:

Returns Vecta.linearGradient object.

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad');

console.log(linear.stops()); //[{"offset": "0%", "color": "#ffe8e6", "opacity": 1}, {"offset": "100%", "color": "#ff8080", "opacity": 1}]
linear.addStops([{"offset": "0%", "color": "#ff7070", "opacity": 1}]); //set stops for the linear gradient
console.log(linear.stops(1)); //[{"offset": "0%", "color": "#ffe8e6", "opacity": 1}, {"offset": "100%", "color": "#ff8080", "opacity": 1}, {"offset": "0%", "color": "#ff7070", "opacity": 1}]

.angle([angle]) Returns: number|Vecta.linearGradient

Get or set linear gradient's angle.

For set, angles are normalized to between 0 - 360 degrees.

If the provided angle is invalid, then the operation fails with an error message in console.

Name	Type	Attributes	Description
`angle`	number	`optional`	The angle to set in degrees, undefined if get.

Returns:

Returns the linear gradient's angle if get or Vecta.linearGradient if set.

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad');

linear.angle(45); //set angle to 45 degrees
console.log(linear.angle()); //45

.length() Returns: number

Get the number of stops. Read only.

Returns:

The number of stops for the gradient

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad');

console.log(linear.length()); //2

.stops(index, [value]) Returns: Object

Get or set stops for linear gradients.

Name Type Attributes Description

index

number

The stop index to get.

value

Object

optional

Undefined to get, null to remove or value object to set, as below.

Name	Type	Attributes	Description
`offset`	string	`optional`	Gradient stop offset
`color`	string	`optional`	Gradient stop color
`opacity`	number	`optional`	Gradient stop opacity

Returns:

Returns the value object if get, or Vecta.linearGradient if set.

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad');

linear.stops([{"offset": "0%", "color": "#ffe8e6", "opacity": 1}, {"offset": "100%", "color": "#ff8080", "opacity": 1}]); //set stops for the linear gradient
console.log(linear.stops()); //[{"offset": "0%", "color": "#ffe8e6", "opacity": 1}, {"offset": "100%", "color": "#ff8080", "opacity": 1}]

linear.stops(1, {"offset": "100%", "color": "#ff7070", "opacity": 1}); //set stop with index 1, i.e. the second stop
console.log(linear.stops(1)); //{"offset": "100%", "color": "#ff7070", "opacity": 1}

.url() Returns: string

Get linear gradient reference url. Read only.

Returns:

Returns the gradient reference url.

Examples:

var linear = new Vecta.linearGradient('L001001000ffe8e6100100ff8080100.grad');

console.log(linear.url()); //'url(#L001001000ffe8e6100100ff8080100.grad)'