SVG on Bootstrap

SVG has a few issues. It behaves different across browsers.
Check out my sample of a spinning SVG circle on Bootstrap
http://hanf.cash/zzz/
I did some crazy things so it will work on all my devices
How can I make this work properly?

 

What I'd suggest?

1) kick the mental midgetry that is bootcrap to the curb. The ONLY thing you can learn from it is how NOT to build a website.

2) Stop putting style in the markup, it has ZERO business even being there. It's bad enough having bootcrap's dumbass "defeats the entire reason HTML and CSS are separate" rubbish such as:

class="col-xs-12 col-sm-4 col-md-4"

Code (markup):

Without further slathering manure on the markup with:

style="overflow:hidden; display:block;width:100%;padding-top:2px;padding-left:0px;padding-right:2px;zbackground:yellow;"

Code (markup):

3) STOP using pixel measurements since that tells users with non-standard font metrics to go suck and egg. Seriously, whoever tells you it's ok to declare font-size in PX is talking out their arse.

4) STOP trying to use IFRAME for content that likely needs to be dynamic. IFRAME is a cute toy for placing adverts on a page sandboxed. If this is actually an image on the page, load it as such in IMG!

Though the REALLY interesting thing is that you don't actually have SVG here. You have layered HTML/CSS <div>! You want a spinning SVG, create a spinning SVG not layered HTML/CSS!

Not sure what you're really trying to accomplish with this, I'm just 100% certain this isn't how you do it.

 

Thank you for the replies. How should I animate a spinning coin?

 

SVG is not a bad choice. Again, your page doesn't USE SVG, even though that's the title of this thread. There is NO SVG on the page you linked to!

NOT that big goofy animations are something that belong on normal websites, unless your goal is to recreate the worst of 1990's geocities or early 2000's myspace.