Re: Declarative reflection transformation through a given axis

Hi Juergen and Olaf

Thank you very much for your quick help.

I was able to adapt the method in Juergen's code (in the simplest case, there was no rotation because the axis of symmetry was the y-axis, but I now know how to handle lines of arbitrary angle). I had seen one or two examples online but was unable to replicate the solution before, probably due to my rusty maths.

I have just slotted the solution into my XSLT transformation and got the desired result (a limb mirrored around a body’s central axis, given the x coordinate of the axis).


Tavis Reddick
[email protected]


> On 25 Jun 2016, at 11:28, Juergen Roethig <[email protected]> wrote:
> 
> Assuming you have a mirror axis which is turned, e.g. 10 degrees clockwise from the vertical, and which goes through some specific point, e.g. 150, 100.
> 
> First, move the origin of your object to be reflected to the point which is hit by your axis by "translate(-150 -100)".
> Second, rotate the object opposite to the rotation of the mirror axis by "rotate(-10)".
> Third, reflect the object along the vertical axis by "scale(-1 1)".
> Finally, turn and move the reflected object back to its "original" rotation and place by "translate(150 100) rotate(10)".
> 
> The complete code … 


> On 25 Jun 2016, at 11:18, Dr. Olaf Hoffmann <[email protected]> wrote:
> 
> using SVG 1.1 or SVG tiny 1.2 this is either a specific transformation of the 
> matrix type or a combination of rotate, translate, scale, translate, rotate.
> The CSS draft, the SVG 2 draft now refers to for transforms, does not provide 
> a specific simpler method for this as well, but it has a transform-origin 
> property, therefore noting this, you only need rotate, scale, rotate.
>