Query / suggestion about transforming the output of Filter Effects

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 Wednesday, 8 May 2013 17:50:15 UTC