radialGradient

Vecta.radialGradient

new Vecta.radialGradient(grad)

Creates a new radial gradient or gets existing radial gradient.

NameTypeDescription
gradstring|object

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

NameTypeAttributesDescription
radiusobjectoptional

The radius for radial gradient

stopsobjectoptional

The stops for radial gradient

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad'); //pass in string id to return existing radial gradient object
var radial = new Vecta.radialGradient('url(#R50505050500000000100100ff8080100.grad)'); //pass in reference url to return existing radial gradient object
var radial = new Vecta.radialGradient({
        	radius: 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 radial gradient.

NameTypeDescription
stopsObject[]

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

Returns:

Returns Vecta.radialGradient object.

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad');

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

.length() Returns: number

Get the number of stops. Read only.

Returns:

The number of stops for the gradient

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad');

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

.radius(radius) Returns: Number|Object

Get or set the radius of radial gradient.

NameTypeDescription
radiusNumber

value to set, undefined to get.

Returns:

Returns the radius when get, or Vecta.radialGradient if set.

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad');

radial.radius(60);
console.log(radial.radius()); //60

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

Get or set stops for radial 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.radialGradient if set.

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad');

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

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

.url() Returns: string

Get radial gradient reference url. Read only.

Returns:

Returns the gradient reference url.

Examples:
var radial = new Vecta.radialGradient('R50505050500000000100100ff8080100.grad');

console.log(radial.url()); //'url(#R50505050500000000100100ff8080100.grad)'
vecta.io Early Access