linearGradient

Vecta.linearGradient

new Vecta.linearGradient(grad)

Creates a new linear gradient or gets existing linear gradient.

NameTypeDescription
gradstring|object

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

NameTypeAttributesDescription
angleobjectoptional

The angle for linear gradient

stopsobjectoptional

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.

NameTypeDescription
stopsObject[]

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.

NameTypeAttributesDescription
anglenumberoptional

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.

NameTypeAttributesDescription
indexnumber

The stop index to get.

valueObjectoptional

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

NameTypeAttributesDescription
offsetstringoptional

Gradient stop offset

colorstringoptional

Gradient stop color

opacitynumberoptional

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)'
vecta.io Early Access