Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

due to the fact that I am not mathematician I hope the question wont be ejected cause of triviality. But here we go:

what is given:

In an svg graphic, I have an element on which several are transformations applied (the working example can be seen here), so it is translated, rotated, skewed and scaled. In terms of computer graphics, I have an instance with applied transformation. In the example the bounding box of this element is draw as the rectangle with green stroke.

what I want:

The element should be moved and scaled in such a way that it fits into the rectangle with blue stroke. (the colors in the image below are different, there the target rectangle has red stroke)

That sounds basically simple, translate and scale, but since the element resides in its own coordinate space scaling becomes quite tricky. The image below shows the transformed element and its coordinate system and it becomes obvious that applying scale in x- and y-direction on the element will scale the element in x'- and y'-direction. So I have the ratio for scaling in the direction of x and y, but I have to transform these values into the space of x' and', so transforming the scale.

the problem

what I have tried:

Since my approach worked for non rotated/skewed elements I concluded that the direction of the x and y axis has to be taken into account.

the ratio for scaling in x and y direction are calculated:

sx = w2 / w1;
sy v2 / v1 //letters are not in the image
s = ( sx, sy )
//but these ratios are only good if ex = ( 1,0 ) and ey = ( 0,1 )
//so I tried to project the coordinates of s into the space of ex, ey
//using the approach:
//values for ex and ey are taken from the transform matrix of the element
//which look like this:
| a c e |
| b d f |
| 0 0 1 |
so ex = ( a,b ), ey = ( c,d )

//what led me to the equation:
sx * ex = s + ey * sy

what i tried

solving the equation is not that hard, but does not deliver the right result. Is this a wrong approach in general, or am I just missing something? Does this what I am trying has a name I should know? Any clues would be nice.

Thanks in advance!


Why not transforming everything into the global coordinate space?

This is possible but can become a very tedious thing when dealing with the svg-elements, there are more than a dozen different ones and for each the conversion of coordinates requires a different algorithm. Additionally does this lead to the problem to remove the element from its context in the document what should not be touched if possible.

Let me try to pose the question more concrete: In the first image above one can see two coordinate systems: x/y and x'/y'. What I need/want to do is scale the element that resides in x'/y' in direction of x/y, in other words I would like to apply a »global« scale in x-direction inside the local coordinate space.

When I was think over that I had the clue that I perhaps should normalize ex and ey, but I am still unsure about my general approach.

Edit 2:

So I went on searching and came over the notion of »Dilation«, what in terms of affine transformations means a translation and scaling through a point, where the proportions of the object are preserved. But in my case I would need a dilation with different scale values for y and x direction, this at least sounds like that I am looking for. Does anybody have some resources for that?

share|cite|improve this question
I don't fully understand the question being asked, but why not just change to the other coordinate system first? – wj32 Nov 23 '12 at 10:43
Very thorough description of your efforts so far! – Simon Hayward Nov 23 '12 at 10:51

In case that anybody should stumble over this Question, here is the answer:

The transformation needs to be transformed from the absolute space to the coordinate space of the graphical element, what is a »Change of Basis«.

Here* is an example. Javascript-Code can be found here.

*usage: manipulate the transformation applied to the element by using the controllers at the right. Create one or more Rectangles by holding down the left-mouse button, manipulate the Transform again and see the result.

share|cite|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.