"clones" animation works on Firefox but not in Chrome

Discuss SVG code, accessible via the XML Editor.
hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

"clones" animation works on Firefox but not in Chrome

Postby hulf2012 » Sun May 29, 2016 3:20 am

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... :)
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

Moini
Posts: 2048
Joined: Mon Oct 05, 2015 10:44 am

Re: "clones" animation works on Firefox but not in Chrome

Postby Moini » Sun May 29, 2016 6:49 am

Another solution could be to unlink the clones ;) - browser support always varies, good you tested in more than one...
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Maestral
Posts: 930
Joined: Sat Aug 27, 2011 7:10 am

Re: "clones" animation works on Firefox but not in Chrome

Postby Maestral » Sun May 29, 2016 8:02 pm

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?
:tool_zoom: <<< click! - but, those with a cheaper tickets should go this way >>> :!:

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: "clones" animation works on Firefox but not in Chrome

Postby hulf2012 » Sun May 29, 2016 11:51 pm

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.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

User avatar
Maestral
Posts: 930
Joined: Sat Aug 27, 2011 7:10 am

Re: "clones" animation works on Firefox but not in Chrome

Postby Maestral » Mon May 30, 2016 12:53 am

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.
:tool_zoom: <<< click! - but, those with a cheaper tickets should go this way >>> :!:

Moini
Posts: 2048
Joined: Mon Oct 05, 2015 10:44 am

Re: "clones" animation works on Firefox but not in Chrome

Postby Moini » Mon May 30, 2016 1:31 am

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?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: "clones" animation works on Firefox but not in Chrome

Postby hulf2012 » Mon May 30, 2016 3:12 am

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


... Maybe because I don't know neither :oops: :roll:

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. :(
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: "clones" animation works on Firefox but not in Chrome

Postby hulf2012 » Mon May 30, 2016 3:17 am

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.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.


Return to “SVG / XML Code”

Who is online

Users browsing this forum: No registered users and 2 guests