Re: Query / suggestion about transforming the output of Filter Effects

Hi Chris,

I agree that this is an interesting addition. I wonder if it would be worth it to add a new filter primitive for transforms or if we allow the transform property to have an effect on the input or output of a filter effect. I added a bug report to the Bugzilla list [1]. My take is that it makes sense to explore the possibility to transform filter effects. It might not get into the first level of the specification though. I will add it to one of the next agendas of the SVG WG.

Greetings,
Dirk

[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=21984



On May 8, 2013, at 7:48 AM, Chris Scott <chris.scott@factmint.com> wrote:

> Hi,
> 
> I am trying to work out the best way to apply a transformation, such as a rotation, to the output of a filter. For example, if one were to create a filter which generates a reflection.
> 
> There are many examples on the Web of authors accomplishing this effect using the <use> tag and a transform attribute. Instinctively, this does not feel optimal to me for the following reasons:
> 
> - Filters are more descriptive
> - Applying transform attributes to a large number of elements requires lots of duplicate code
> 
> Consider the following solution to the reflection effect:
> 
> <svg>
>     <defs>
>         <filter id="blur">
>             <feGaussianBlur stdDeviation="5" />
>         </filter>
>     </defs>
>     
>     <g id="collection">
>         <rect stroke="red" stroke-width="3" fill="blue" x="10" y="10" height="100" width="100" />
>         <circle stroke="green" stroke-width="8" fill="yellow" cx="150" cy="50" r="40">
>             <animate attributeName="cx" from="0" to="150" dur="3s" />
>         </circle>
>     </g>
>     <use xlink:href="#collection" transform="translate(0, 166) scale(1, -0.5)" filter="url(#blur)" />
> </svg>
> 
> It is by no means clear what is happening here. I would be interested to hear the thoughts of the mailing list on applying the transformation as a filter effect; perhaps by adding a new Filter Effect to the future specifications, such as:
> 
> <svg>
>     <defs>
>         <filter id="reflect">
>             <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blur" />
>             <feTransform transformString="translate(0, 166) scale(1, -0.5)" in="blur" result="reflection" />
>            <feMerge>
>                <feMergeNode in="SourceGraphic" />
>                <feMergeNode in="reflection" />
>         </filter>
>     </defs>
>     
>     <g filter="url(#reflection)">
>         <rect stroke="red" stroke-width="3" fill="blue" x="10" y="10" height="100" width="100" />
>         <circle stroke="green" stroke-width="8" fill="yellow" cx="150" cy="50" r="40">
>             <animate attributeName="cx" from="0" to="150" dur="3s" />
>         </circle>
>     </g>
> </svg>
> 
> In my opinion, an feTransform Filter Effect would lead to much more re-usable and readable code. Is there another alternative I have not considered? If not, would an feTransform element be considered for a future addition to the specifications?
> 
> I hope I have been concise and explained my thoughts reasonably!
> 
> Chris.

Received on Friday, 10 May 2013 03:07:06 UTC