2

On Firefox this JSFiddle does not work as intended.

In chrome you can see the gear spins around the screwdriver, but in Firefox it spins around the entire image. I have tried using -moz- for the animations and keyframes with no luck.

I have also attempted implementing a transform-origin with numerous values of center, center center, 50% 50% etc.

Is there a solution to this?

Lars Beck
  • 3,446
  • 2
  • 22
  • 23
Clams Are Great
  • 280
  • 4
  • 17
  • Have a look at this this might be helpful https://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox – Mohamed Mohaideen AH Jun 19 '17 at 11:00
  • Maybe this could help. It's working for Firefox and Chrome. http://jsfiddle.net/raving/e2tt2mao/. – DanielaB67 Jun 19 '17 at 11:35
  • How do you create such complex stuff with svg? – Mattia Nocerino Jun 19 '17 at 12:33
  • 1
    @MattiaNocerino you create the vector with layers in software like Adobe Illustrator, export it as an SVG, that file can then be opened as code revealing the paths, polygons, and rectangles that make up each shape to which you can apply classes and id's and using CSS or JS animate it. – Clams Are Great Jun 19 '17 at 13:29

1 Answers1

1

You are right in that it has to do with transform-origin, and what you are experiencing is proper behavior. The origin of center is relative to the parent object and above, since we are dealing with SVGs the positioning is defined in the HTML section of screwdriver-icon and screwdriver-gear. Looking at the vectors we see most of them are positioned between x: 288 - 310 and y: 180 - 190.4. Through trial and error I worked out your center of the gear is at x: 303 and y: 190.4. This works in Chrome and Firefox. See the updated Fiddle:

https://jsfiddle.net/a8b4Lauk/23/

Gavin Hull
  • 48
  • 7