- From: Chris Scott <chris.scott@factmint.com>
- Date: Wed, 08 May 2013 15:48:51 +0100
- To: www-svg@w3.org
- Message-ID: <1368024531.19171.20.camel@localhost.localdomain>
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