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"
		  <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" />
			   <feMergeNode />
			   <feMergeNode in="SourceGraphic" />

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?

Received on Tuesday, 11 January 2011 18:23:03 UTC