addition of filters about svg.js HOT 2 CLOSED

Thanks, I will look into this as soon as possible.

from svg.js.

Hi,

Thanks for that.
Filters should really be a part of svg.js but before this could be released it needs a lot more work.
I am still in doubt on if it should be a plugin or part of the core library.
I might go for an even more modular structure in the future.

Kind regards,
Wout

Wout Fierens

Imp. Inc. Ltd
impinc.co.uk (http://impinc.co.uk)

On Sunday, 14 April 2013 at 02:45, remy215 wrote:

Hi, great job on this library, really impressive.
I edited it to add support for filters on top of already existing support for masks.
below are the changes:
change1:

// Create masking element
, mask: function() {
return this.defs().put(new SVG.Mask)
}
/*** RD-added: start _/
// Create masking element
, filter: function() {
return this.defs().put(new SVG.Filter)
}
/* RD-added: end ***/
// Create clipping element
, clip: function() {
return this.defs().put(new SVG.Clip)
}
change2:
SVG.extend(SVG.Element, {
// Distribute mask to svg element
maskWith: function(element) {
/_ use given mask or create a new one /
this.mask = element instanceof SVG.Mask ? element : this.parent.mask().add(element)
return this.attr('mask', 'url(#' + this.mask.attr('id') + ')')
}
})
/* RD-added: start */
SVG.Filter = function() {
this.constructor.call(this, SVG.create('filter'))
}
// Inherit from SVG.Container
SVG.Filter.prototype = new SVG.Container
SVG.extend(SVG.Element, {
// Distribute mask to svg element
filterWith: function(element) {
/ use given mask or create a new one /
this.filter = element instanceof SVG.Filter ? element : this.parent.filter().add(element)
return this.attr('filter', 'url(#' + this.filter.attr('id') + ')')
}
})
/* RD-added: end ****/
SVG.Clip = function() {
this.constructor.call(this, SVG.create('clipPath'))
}
Usage:

var toShow = draw.image('img/IMG_2.JPG', width, height);
var filter = draw.filter();
var gauss = SVG.create('feGaussianBlur');
gauss.setAttribute('stdDeviation', 3);
filter.node.appendChild(gauss);
toShow.filterWith(filter);
This works like a charm.
Regards,
Remy

—
Reply to this email directly or view it on GitHub (#23).

from svg.js.