Tool for working with svg filters
npm install svg-filterSee http://mathisonian.github.io/svg-filter for examples
``js
var d3 = require('d3');
var SvgFilter = require('svg-filter');
var filter = new SvgFilter();
filter
.append('blur')
.attr('stdDeviation', 50);
var size = 200;
d3.select('body')
.append('svg')
.attr('width', size)
.attr('height', size)
.append('rect')
.attr('width', size)
.attr('height', size)
.attr('fill', 'blue')
.attr('filter', filter);
`
The following are shorthand for the full element names. The links go to mozillas docs which do well to cover all inputs available to each filter type.
* 'blend'
* 'blur'
* 'color'
* 'component-transfer'
* 'composite'
* 'convolve'
* 'diffuse'
* 'displacement'
* 'flood'
* 'image'
* 'merge'
* 'morphology'
* 'offset'
* 'specular'
* 'tile'
* 'turbulence'
#### 1. Create a new filter
`js`
var SVGFilter = require('svg-filter');
var filter = new SVGFilter();
#### 2. Add effects to the filter
`js
// appends a blur effect
filter
.append('blur')
// sets a parameter on the
// blur effect. see links
// above for more info on
// available attributes
.attr('stdDeviation', 5);
`
#### 3. Attach the filter to a d3 selection
`js
d3selection.attr('filter', filter);
`
#### Chain two effects together
`js
var filter = new SVGFilter();
// send the output of blur
// to the input of offset.
//
filter
.append('blur')
.to('offset')
.attr('dx', 10)
.attr('dx', 10);
`
#### Merge separate effects
`jsto
var filter = new SvgFilter();
var makeColoredFilter = function(color, dx, dy) {
return filter
.append('flood')
.attr('color', color)
.attr('opacity', 0.5)
// the command creates a
// new 'composite' effect and
// automatically sends the output
// of the flood effect to the input
// of composite.
.to('composite')
.attr('operator', 'in')
.in2('SourceAlpha') // shorthand for attr('in2', 'SourceAlpha')
// again, this automatically wires the
// output of composite to the input of a new
// 'offset' effect
.to('offset')
.attr('dx', dx)
.attr('dy', dy);
};
var red = makeColoredFilter('#ff0000', 0, -12);
var green = makeColoredFilter('#00ff00', 0, -6);
var yellow = makeColoredFilter('#ffff00', 0, 0);
var blue = makeColoredFilter('#0000ff', 0, 6);
filter
.merge(red, green, yellow, blue);
``