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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 6 Sep 2011 18:36:33 -0700
Message-ID: <CAAWBYDCA9-phSr9qDLbVqckG3jfPdfD6eduhLf9w+sTyRFvQCA@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: public-fx@w3.org
On Tue, Sep 6, 2011 at 6:06 PM, Dean Jackson <dino@apple.com> 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.

Sounds excellent!  I assume this has no geometric effect, as normal
for transforms, so rotating an image with the filter() function would
end up clipping the corners that are now outside the image's geometry.

Why not expose the transform functions directly, rather than requiring
them to be wrapped in a transform() function?  That is, allow "filter:
scale(1.1);" rather than "filter: transform(scale(1.1));"


> 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)

Sounds good as well.  The example you gave is compelling:

h1 {
  filter: blur(5px) transform(scale(1.1)) under();
}

I can't tell if I want over/under to have the meanings you give here,
or if I want to swap them.  I suspect either would make equal sense.

(How far are we going down this route?  Are we stopping at "you can
refer to the source graphic", or would we eventually get the ability
to tag subsets of the filter chain and refer to them?  I suspect the
latter is best left in real SVG; representing graphs in nested
functions is nasty.)

> 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.

If I'm understanding you correctly, you're referring to doing
"background-image: filter(...);", where the filter() function refers
to the element itself (maybe through the element() function?).  That
seems hackier than necessary.  If this is a good use-case we should
address it directly.

~TJ
Received on Wednesday, 7 September 2011 01:37:28 GMT

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