Re: Filter Templates

On Jan 11, 2011, at 11:27 AM, Sylvain Galineau wrote:

>> From: public-fx-request@w3.org [mailto:public-fx-request@w3.org] On
>> Behalf Of Brad Kemper
>> Sent: Tuesday, January 11, 2011 10:22 AM
>> To: www-style list; public-fx@w3.org
>> Subject: Filter Templates
>> 
>> Let me begin by saying I know very little about SVG, but I am trying to slowly
>> learn more.
>> 
>> There has been talk before about "canned" SVG filter effects. I would like to
>> propose (or at least, discuss the merits of) accomplishing this via a templating
>> element inside the filter element, that defines what values it takes from the
>> CSS declaration.
>> 
>> Thus, for the following SVG filter that defines a certain drop shadow effect:
>> 
>> 	<filter id="bradsDropShadow" x="0" y="0" width="1" height="1"
>> 			  filterUnits="userSpaceOnUse">
>> 		  <feTemplate values="feFlood.flood-color && [feOffset.dx
>> feOffset.dy feGaussianBlur.stdDeviation]"/>
>> 		  <feFlood flood-color="black" in="SourceAlpha"
>> result="Colorized" />
>> 		  <feGaussianBlur stdDeviation="2" in="Colorized" />
>> 		  <feOffset dx="2" dy="2" />
>> 		  <feMerge>
>> 			   <feMergeNode />
>> 			   <feMergeNode in="SourceGraphic" />
>> 		  </feMerge>
>> 	</filter>
>> 
>> Given the above "feTemplate" values, it could be used in a declaration like
>> this:
>> 
>> filter: url(#bradsDropShadow) 4px 5px;
>> 
>> ...and the two lengths would be mapped to the "dx" and "dy" of feOffset.dx,
>> and the omitted values would take their default values from the regular filter
>> values ("black" for flood-color and "2" for stdDeviation in the above example),
>> as long as the order and so forth of the feTemplate values were satisfied.
>> 
>> Could that work?
> 
> Like Tab, +1 on concept. My first thought was to apply SVG Parameters to 
> Filters. (See http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/ for SVG
> Parameters). 

That seems like the right approach, but how do you name the parameters from CSS?
You'd have to do something like:

filter: url(#myCoolFilter, param1=10px, param2=20px);

Simon