W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2012

Re: [filters] Custom filter functions proposal

From: Lea Verou <leaverou@gmail.com>
Date: Sun, 19 Feb 2012 18:31:52 +0200
Message-ID: <4F4123F8.3080205@gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
CC: public-fx@w3.org
On 19/2/12 17:48, Rik Cabanier wrote:
 > Hi Lea,
 > I can see how this would be very useful.
 > It would also allow people to create libraries with filters that 
could be used as short hands.

Exactly! This is one of the benefits I mentioned ;)

 > Can you write out a complete example of such a filter?
 > Rik

Sure. My imagination is running kinda low at the moment, so lets assume 
hue-rotate wasn't already in the draft.

An author would include this filter in an SVG called filterlib.svg 
(which could obviously include other filters as well):

<filter id="hue-rotate">
   <feColorMatrix type="hueRotate" values="param(angle) 0"/>

Note that the syntax of param() and its default value (of 0 here) is 
defined in SVGParam [1].

And then would define it as a function in their CSS like so:

@filter {
   src: url(/path/to/filterlib.svg#hue-rotate);
   name: hue-rotate;
   parameters: angle;
   default: 0;

And then they'd be able to use hue-rotate() as is currently defined by 
the Filter Effects draft.

An alternative syntax could include the function name outside the 
braces, @keyframes-style:

@filter hue-rotate {
   src: url(/path/to/filterlib.svg#hue-rotate);
   parameters: angle;
   default: 0;

`default` isn't really needed in this case, as the SVG already defines a 
default, so it could be omitted.

[1]: http://www.w3.org/TR/SVGParam/

Lea Verou (http://lea.verou.me | @LeaVerou)
Received on Sunday, 19 February 2012 16:32:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:46 UTC