- 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