[filters] transform and composite-under/over

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.

(I'm not fond of the lengthy names… maybe 'under' and 'over' are enough)

For example, 'composite-under' would be equivalent to:

<filter id="composite-under">
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

(you can also do it with feComposite)

I'm wary of introducing more work, so I should suggest that another way to achieve the effect of 'under' would be to use the filter() function on a background-image. It's a little roundabout, but might do for most things. On the other hand, these functions are very easy to implement.

Dean

Received on Wednesday, 7 September 2011 01:06:35 UTC