0

I have an animated svg, but firefox doesn't currently support the transform-origin property with % for svgs. So I'd like to hide the animated svg and show a static svg or png when users view in firefox. I'm not sure how to do this. I don't think feature detection will work, because firefox does support svgs and transform-origin, just not transform-origin for svg. Thanks for any suggestions.

aprobert
  • 37
  • 1
  • 5
  • Just wait till December 15, Firefox 43 released then supports percentages on transform-origin. That's only 17 days away at the time of writing. – Robert Longson Nov 28 '15 at 04:59
  • Yeah I had heard this, but my concern is that many users won't have updated their version of Firefox and so the problem would still persist. – aprobert Nov 30 '15 at 19:44

1 Answers1

0

Had this issue. I remember reading a comment somewhere in SO that Firefox42 supports this with a prefix:

  -moz-transform-origin

anyway, to detect firefox i use a snippet found here:

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
 {
     //Do Firefox-related activities
 }

in your case, if the browser is indeed firefox, and assuming you are using 2 container elements, 1 for your SVG and one for your PNG, you could:

1) directly add/show the elements with js

2) add a 'firefox' class to your root html element and style your css accordingly.

so, let's say you have a #svg and #png containers

in your css you'd use: 

.firefox #png { display: block; }
#png { display: none; }
#svg { display: block; }
.firefox #svg { display: none; }

Hope this helps!

Community
  • 1
  • 1
Uzi
  • 2,436
  • 13
  • 13