Hi to all, while working on a lightweight svg editor implemented as firefox extension I ran into problem and now need some help to understand the fundamentals of nested svg transformations. The basic matrix concatenations work well but when I start to rotate an element which already has a skew transform applied I got it working well only if I prepend the rotation matrix to the transform... so far good but rotate an element which resides inside of a group things get more complicated. I tried with inkscape and found it will apply a matrix and also change the width and height and even the stroke-width of the rect I used for testing like: <g transform="translate(100,100) skewY(10) skewX(25)" id="g15"> <rect id="skewPath23" x="-222.08493" y="237.81218" onclick="incrementTransform(this)" width="138.00793" height="101.14107" transform="matrix(0.8490597,-0.5282969,0.9708449,0.2397086,0,0)"
style="fill:#ff0000;fill-opacity:0.5;stroke:#330000;stroke-width:0.35443538" /> </g>
works well but how to understand? Is anyone able to explain how this is implemented?
Cordially, Axel
Hi Axel,
... but rotate an element which resides inside of a group things get more complicated. I tried with inkscape and found it will apply a matrix and also change the width and height and even the stroke-width
width and height and stroke-width won't change if you set "Store transformation = Preserved" in Inkscape Preferences.
Concerning transformations inside groups: Let A be the transform matrix of an object and B the accumulated transformations of all its parent groups. The absolute transformation of the object is
T = B * A
Now you want to transform this object by matrix C, gives you
T' = C * T = C * B * A = B * B.inverse * C * B * A = B * A'
with
A' = B.inverse * C * B * A
That's it :-)
Regards, Thomas
participants (2)
-
Axel Huizinga -
Thomas Holder