Hello

Maybe I should better post this in stackoverflow, ... But I don't want to have to manage more usernames and passwords!. Or can it be shared anonymously?

Here is the codepen link:
http://codepen.io/hulf2015/pen/wWvGNr

An array of squares should move at the same time. It does in Firefox, but in Chrome they don't move.

I investigated it. A solution could be using "symbols", but the problem is that the squares scale based in the same origin:
http://codepen.io/hulf2015/pen/KMKWJN

Anyway... just sharing here...

Another solution could be to unlink the clones - browser support always varies, good you tested in more than one...

Can`t see the movement but if origins are the only problem - set the squares to the desired positions and then adjust the origins at the desired spot?

Thanks for your interest

Moini:
- So far it seems the best solution: apply the changes to each "clone" of the square. But I can't see a quick, repeating way of doing with CSS only. You see, the transformation- origin - point of each element is the same: the topleft corner of the SVG space. So all the elements will scale and rotate around that point. Unless you transform that point for each one of the elements. Using Javascript that transformation can be achieved. Or using Sass .

Maestral:
- If you see the example(s) in the last version of Firefox (46) it should run. One of them run as expecteed in Chrome too. I'd wish to know which web browser you are using.

hulf2012 wrote:I'd wish to know which web browser you are using.

Just updated ver. of chrome (51.0), where second link does work but I still got static 5x5 squares on the first one.

I certainly don't understand 100% which result you want to achieve, but would setting the transformation origin using something like:

transform-origin: 20% 40%;

help in any way?

Moini wrote:I certainly don't understand 100% which result you want to achieve,..

... Maybe because I don't know neither

Some of my thoughts were:

- Complaining about standards (or just wannabe standards) that are not standards
- Just testing, and prove that I did all what is possible with CSS3 and SVG.
- What I want is seen in the first example (If you see it in Firefox). You'll see that each square scales in its own space. There is no need to apply a transform-origin to each of them, just to the original shape, maybe.

- Some one comes an magically solves the problem elegantly. I say this without irony.

Moini wrote:..., but would setting the transformation origin using something like:

transform-origin: 20% 40%;

help in any way?

By the way, last time I saw, You can't put the transform-origin in percentages in Firefox, but it does recognize it in Chrome.

Maestral wrote:

hulf2012 wrote:I'd wish to know which web browser you are using.

Just updated ver. of chrome (51.0), where second link does work but I still got static 5x5 squares on the first one.

Thank you

If some one can test in Safari it will be good. But I don't want to bother more.

Trying in Edge, of IE... I assume is a waste of time.