Re: [filters] transform and composite-under/over

On Sep 6, 2011, at 6:06 PM, Dean Jackson wrote:

> I think it would be useful to add the following shorthand functions to the filter property.
> 
> 'transform(<transform value>)' applies a 2d affine transformation effect. A common example here is that you want to scale the filtered image a little, so that appears slightly bigger than the source. Imagine a piece of h1 text as input, apply some effect like a blur, increase the scale and draw it behind the original.
> 
> The only transformation effect SVG 1.x provides is feOffset, which is a generalised case of what I'm proposing.
> 
> The effect makes more sense in the context of the next proposals.
> 
> 'composite-under' and 'composite-over' allow the author to blend the current filter image with the source graphic. For effects on non-image content, you're often going to want to blend with the unfiltered source. In the example above, you want to keep the original text visible and still apply an effect. You don't want to duplicate the element.

Before going forward with more names, I'd like to understand the use cases we envision. For instance, there's an example in the published version of the filter spec (which you cleverly removed :-)

	http://www.w3.org/TR/SVG/filters.html#AnExample

This is a nice example. I think you can construct the base image using HTML and CSS. Using the 'filter' property, can you produce the filter effects? I think not since, at least, there are no filter functions for specular lighting. But there is a function for drop-shadow, which takes the place of the blur and offset filters in the example. So perhaps we should talk about how to do practical effects like this and see what functions we need for that.

I don't think we should support a full pipeline like that example uses, with multiple outputs being filtered and combined in multiple ways. But for this particular example maybe we could just add a specular-highlight effect to the image. Then we could have:

<style>
	#text { … white text with black stroke … }
	#inner-bg { … red rounded box … }
	#outer-ring { … red rounded border with transparent background … }

	#source-image { filter: specular-highlight(0.5 1 0.75 #bbbbbb) drop-shadow(4 4 black) }
</style>

<body>
<div id="source-image">
	<div id="outer-ring"></div>
	<div id="inner-bg">
		<div id="text">CSS</div>
	</div>
</div>
</body>

The params would be (something like):

	<light x-offset> <point light y-offset> <specular exponent> <color>

I think that would give us most of the "lighting effects" people use, which is a really common effect.

-----
~Chris
cmarrin@apple.com

Received on Wednesday, 7 September 2011 14:43:37 UTC