W3C home > Mailing lists > Public > public-fx@w3.org > July to September 2011

[filters] transform and composite-under/over

From: Dean Jackson <dino@apple.com>
Date: Wed, 07 Sep 2011 11:06:01 +1000
Message-id: <3E90D32F-D38A-42E4-BB1C-6E03B4B68A34@apple.com>
To: public-fx@w3.org
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 7 September 2011 01:06:39 GMT